ScrollPanel

ScrollPanel is used to display overflowed content with theme aware scrollbars instead of browser scrollbars.

Basic ScrollPanel

f5757cb3
f5757cb3
Audi
1978
Yellow
f585d480
f585d480
Mercedes
1986
Black
29b31f61
29b31f61
Ford
1978
Silver
25312b83
25312b83
Opel
1997
Brown
3acd90ba
3acd90ba
Volkswagen
1994
Maroon
453b3e23
453b3e23
Chrysler
1968
Yellow
2d336376
2d336376
Chrysler
1983
Blue
1523bb43
1523bb43
Volkswagen
1999
Black
5f19f1be
5f19f1be
Volkswagen
1975
Yellow

Native ScrollPanel

f5757cb3
f5757cb3
Audi
1978
Yellow
f585d480
f585d480
Mercedes
1986
Black
29b31f61
29b31f61
Ford
1978
Silver
25312b83
25312b83
Opel
1997
Brown
3acd90ba
3acd90ba
Volkswagen
1994
Maroon
453b3e23
453b3e23
Chrysler
1968
Yellow
2d336376
2d336376
Chrysler
1983
Blue
1523bb43
1523bb43
Volkswagen
1999
Black
5f19f1be
5f19f1be
Volkswagen
1975
Yellow

Source

<h3>Default ScrollPanel</h3>
<p:scrollPanel style="width:250px;height:200px">
    <p:dataGrid var="car" value="#{tableBean.carsSmall}" columns="3">
        <p:panel header="#{car.model}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
                <h:outputText value="#{car.model}" />
                <h:outputText value="#{car.manufacturer}" />
                <h:outputText value="#{car.year}" />
                <h:outputText value="#{car.color}" />
            </h:panelGrid>
        </p:panel>
    </p:dataGrid>
</p:scrollPanel>

<h3>Native ScrollPanel</h3>
<p:scrollPanel style="width:250px;height:200px" scrollMode="native">
    <p:dataGrid var="car" value="#{tableBean.carsSmall}" columns="3">
        <p:panel header="#{car.model}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
                <h:outputText value="#{car.model}" />
                <h:outputText value="#{car.manufacturer}" />
                <h:outputText value="#{car.year}" />
                <h:outputText value="#{car.color}" />
            </h:panelGrid>
        </p:panel>
    </p:dataGrid>
</p:scrollPanel>