Sticking a component when scrolling
The Sticky component is used to make another component stick to the top of the page once a user has scrolled past it. Hence, the sticky component requires a target component to keep it in the viewport on scroll.
In this recipe, we will demonstrate the usage of the p:sticky tag.
How to do it…
We would like to stick a select menu with a label as shown in this screenshot:
The select menu and the label are placed within h:panelGrid, which acts as the target component:
<h:panelGrid id="langGrid" columns="2" style="box-shadow: none;"> <p:outputLabel for="lang" value="Language: "/> <p:selectOneMenu id="lang"> <f:selectItem ...
Get PrimeFaces Cookbook - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
