Displaying overflowed content with scrollPanel

The scrollPanel component provides customizable scrollbars instead of the browser's scrolls. In this recipe, we will create panels with a fixed viewport and styled scroll bars applied to them.

How to do it…

A basic definition of 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="#{scrollPanelBean.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 x 500 pixel view, and the content can be scrollable horizontally and vertically. By default, according to the selected UI theme, customized scrollbars will be rendered...