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??
Sticky component is not working with RIO
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please try with;
Code: Select all
.ui-sticky {
top: 64px !important;
}
Github Profile: https://github.com/mertsincan
aragorn wrote:Please try with;Code: Select all
.ui-sticky { top: 64px !important; }
perfect.... awesome thank you aragorn
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??
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??
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks for the update
Github Profile: https://github.com/mertsincan
I have an small improvement. If you use Sticky components linked with others like outputpanel, using your idea I'm using something like this:
where 'stickMenu' could be the widgetvar for your sticky component:
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});
}
}
}
});
Code: Select all
<p:outputPanel id="panelMenu" styleClass="ContainerIndent Unselectable Card ShadowEffect" >
</p:outputPanel>
<p:sticky target="panelMenu" margin="64" widgetVar="stickMenu"/>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the update
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 2 guests