Sticky component is not working with RIO

Locked
ybendek
Posts: 102
Joined: 05 Aug 2011, 17:52

03 Feb 2016, 04:03

Hi.

I want to use the Sticky component with RIO, but unfortunatelly is not working. Basically all is hidden behind the upper corner bar... you could try it even with the rio demo page.

http://www.primefaces.org/rio/ui/misc/sticky.xhtml

Any way to solve it??

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

03 Feb 2016, 09:25

Please try with;

Code: Select all

.ui-sticky {
   top: 64px !important;
}

ybendek
Posts: 102
Joined: 05 Aug 2011, 17:52

03 Feb 2016, 17:43

aragorn wrote:Please try with;

Code: Select all

.ui-sticky {
   top: 64px !important;
}

perfect.... awesome :) thank you aragorn

ybendek
Posts: 102
Joined: 05 Aug 2011, 17:52

04 Feb 2016, 02:04

Well until now I found we have an attribute to do that "margin" :P

However now I have another problem with RIO and sticky component, if I am from an small device where the main menu(left menu) is hidden and scroll a litle to trigger this component, and then open the menu, this last is displayed behind of the sticky panel :S any advice??

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

05 Feb 2016, 15:03

Please add this content in your sticky datatable page;

Code: Select all

<ui:define name="head">
   <style type="text/css">
        .ui-sticky {
            top: 64px !important;
        }
   </style>
        
   <script type="text/javascript">
    //<![CDATA[
        $( window ).scroll(function() {
            var datatableWidget = PF('myDataTable');

            if(datatableWidget && datatableWidget.cfg.stickyHeader) {
                if(document.documentElement.clientWidth <= 960) {
                    var stickyHeaderZindex = datatableWidget.cloneContainer.css('z-index');
                    $('#layout-menu-cover').css({'z-index': ++stickyHeaderZindex});
                    $('#layout-topbar').css({'z-index': ++stickyHeaderZindex});
                }
                else {
                    //reset z-index
                    $('#layout-menu-cover').css({'z-index': 999});
                    $('#layout-topbar').css({'z-index': 1000});
                }
            }
        });
    //]]>
   </script>
</ui:define>

ybendek
Posts: 102
Joined: 05 Aug 2011, 17:52

05 Feb 2016, 17:54

OMG... thank you so much...

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

05 Feb 2016, 21:39

:D Glad to hear, thanks for the update ;)

ybendek
Posts: 102
Joined: 05 Aug 2011, 17:52

06 Feb 2016, 03:36

I have an small improvement. If you use Sticky components linked with others like outputpanel, using your idea I'm using something like this:

Code: Select all

$(window).scroll(function () {

                var stickyWidget = PF('stickMenu');
                if (stickyWidget) {
                    var trgCmp = stickyWidget.target;
                    var classTrg = trgCmp.attr('class');
                    //check if sticky is displayed
                    if (classTrg.indexOf('ui-sticky') > 0) {
                        if (document.documentElement.clientWidth <= 960) {
                            var stickyHeaderZindex = trgCmp.css('z-index');
                            $('#layout-menu-cover').css({'z-index': ++stickyHeaderZindex});
                            $('#layout-topbar').css({'z-index': ++stickyHeaderZindex});
                        } else {
                            //reset z-index
                            $('#layout-menu-cover').css({'z-index': 999});
                            $('#layout-topbar').css({'z-index': 1000});
                        }
                    }
                }
            });

where 'stickMenu' could be the widgetvar for your sticky component:

Code: Select all

           <p:outputPanel id="panelMenu" styleClass="ContainerIndent Unselectable Card ShadowEffect" >
                
            </p:outputPanel>
            <p:sticky target="panelMenu" margin="64" widgetVar="stickMenu"/>


mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

08 Feb 2016, 11:07

Thanks a lot for the update :)

Locked

Return to “Rio”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests