Primefaces Scrollable Layout
Is it possible to make a Primefaces Layout Scrollable? I dont want to make my layoutUnits scrollable as I dont really want multiple scrollable elements on the pages. I would prefer for the page & content panels to resize according to the content, so the user can view the data in a linear fashion. I am currently using a full page primefaces layout:
<p:layout fullPage="true">
If this isnt possible then what is my best alternatives as I quite like the primefaces components b开发者_StackOverflow中文版ut could live without its layout features.
Cheers
You can create a layoutUnit for center, then provide a style class in it, where in your css you can provide scrollable along to x and y position.
<p:layoutUnit position="center">
<div id="myScreen" class="right col scroll-x scroll-y">
<ui:insert name="content">My Screen Content Goes Here</ui:insert>
</div>
</p:layoutUnit>
And in cc
file --
.col {
top: 0; bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}
Hope this would help.
as far as i can tell it cannot be done! I dumped the primefaces layout and went with a generic web layout...
Just put everything in a <p:scrollPanel>
component inside the <p:layoutunit>
, that will work (now that it's 2015 and we are on Primefaces v5.1.x!). Make sure you add absolute positioning and height to stretch the <p:scrollPanel>
to the innards of the <p:layoutunit>
- see below.
http://www.primefaces.org/showcase/ui/panel/scrollPanel.xhtml
<p:scrollPanel mode="native" style="position: absolute; height: 100%;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus.
</p>
<p>
Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci.
</p>
<p>
Sed tincidunt urna quis metus lacinia commodo. Praesent convallis eros vel quam scelerisque bibendum. Mauris eget dignissim libero. Pellentesque sagittis sem quis ipsum viverra, sed consequat mi consectetur. Donec facilisis dapibus ultrices. Donec luctus auctor lacus, at congue nisi aliquet eu. Praesent in justo at risus faucibus ultricies. Fusce et libero lectus. Donec elementum pharetra sapien, at placerat purus sodales et. Vivamus iaculis lacus sed placerat rhoncus. Mauris iaculis sit amet nunc at placerat. Donec consequat euismod lacinia. Etiam nec quam vehicula, cursus massa in, ullamcorper erat.
</p>
<p>
Praesent volutpat scelerisque vestibulum. In eu massa non neque rutrum commodo. Nunc vel enim nisi. Aenean leo ipsum, molestie vel justo nec, pharetra luctus dui. Nunc rhoncus turpis id lorem luctus consequat. Nulla condimentum adipiscing turpis consequat semper. Etiam ullamcorper velit nec hendrerit malesuada. Praesent venenatis leo sit amet arcu commodo, sit amet porta tellus suscipit. Quisque mi tortor, vestibulum in arcu non, pretium auctor libero. In commodo luctus placerat.
</p>
</p:scrollPanel>
I don't believe that layouts are right for what you want to do here. This is good for enabling templating on a single page and the such. You might be able to however put an iframe
within a layoutUnit
to emulate the same effect though I have never tried this personally and couldn't tell you if it will work or not.
精彩评论