O'Reilly logo

PrimeFaces Cookbook by Mert Çalışkan, Oleg Varaksin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying overflowed content with scrollPanel

The scollPanel component provides customizable scroll bars instead of the browser's scrolls.

How to do it...

A basic definition for a scroll panel with a width of 500 pixels and a height of 500 pixels would be as follows:

<p:scrollPanel style="width:500px;height:500px">
  <p:dataGrid var="car" value="#{scrollPanelController.cars}" 
  columns="2">
    <p:panel header="#{car.name}" style="text-align:center">
      <p:graphicImage value=
      "/resources/images/autocomplete/#{car.name}.png" />
    </p:panel>
  </p:dataGrid>
</p:scrollPanel>

This will render a list of car models within a data grid. The visual size of the grid will be limited to a 500 by 500 pixels view, and the content can be scrollable horizontally and vertically. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required