ScrollPanel

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

Basic ScrollPanel

b23839dc
b23839dc
Ferrari
1971
Yellow
c00b7a22
c00b7a22
Mercedes
1997
Yellow
8212ae2c
8212ae2c
Chrysler
1989
Orange
3663a6d1
3663a6d1
Opel
1975
Silver
9d28546a
9d28546a
Opel
1975
Blue
ec59095e
ec59095e
Opel
1989
Red
c76f4468
c76f4468
Ford
1995
Yellow
352cc2be
352cc2be
Volvo
1960
Black
7fae5949
7fae5949
Chrysler
1975
Red

Native ScrollPanel

b23839dc
b23839dc
Ferrari
1971
Yellow
c00b7a22
c00b7a22
Mercedes
1997
Yellow
8212ae2c
8212ae2c
Chrysler
1989
Orange
3663a6d1
3663a6d1
Opel
1975
Silver
9d28546a
9d28546a
Opel
1975
Blue
ec59095e
ec59095e
Opel
1989
Red
c76f4468
c76f4468
Ford
1995
Yellow
352cc2be
352cc2be
Volvo
1960
Black
7fae5949
7fae5949
Chrysler
1975
Red

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>