Page 1 of 1
Sticky component is not working with RIO
Posted: 03 Feb 2016, 04:03
by ybendek
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??
Re: Sticky component is not working with RIO
Posted: 03 Feb 2016, 09:25
by mert.sincan
Please try with;
Code: Select all
.ui-sticky {
top: 64px !important;
}
Re: Sticky component is not working with RIO
Posted: 03 Feb 2016, 17:43
by ybendek
aragorn wrote:Please try with;
Code: Select all
.ui-sticky {
top: 64px !important;
}
perfect.... awesome
thank you aragorn
Re: Sticky component is not working with RIO
Posted: 04 Feb 2016, 02:04
by ybendek
Well until now I found we have an attribute to do that "margin"
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??
Re: Sticky component is not working with RIO
Posted: 05 Feb 2016, 15:03
by mert.sincan
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>
Re: Sticky component is not working with RIO
Posted: 05 Feb 2016, 17:54
by ybendek
OMG... thank you so much...
Re: Sticky component is not working with RIO
Posted: 05 Feb 2016, 21:39
by mert.sincan
Glad to hear, thanks for the update
Re: Sticky component is not working with RIO
Posted: 06 Feb 2016, 03:36
by ybendek
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"/>
Re: Sticky component is not working with RIO
Posted: 08 Feb 2016, 11:07
by mert.sincan
Thanks a lot for the update