CODEWITHSUNDEEP
jsfprimefacesresponsive-design
Oswaldo Jaime
Oswaldo Jaime

Reputation: 11

PrimeFaces responsive is not working

I want to use PrimeFaces responsive, however when I run the app in the pc all is working fine, if I resize the browser the app works as expected but if I open the app with a phone, the responsive is not working.

I am using PrimeFaces 5.3.RC1, Mojarra 2.2.0 and Glassfish 4.0

Code :

<h:form>
    <p:dataTable var="car" >
        <p:column headerText="Id">
            <h:outputText value="ColId" />
        </p:column>

        <p:column headerText="Year (p3)" priority="3">
            <h:outputText value="Year" />
        </p:column>

        <p:column headerText="Brand (p2)" priority="2">
            <h:outputText value="brand " />
        </p:column>

        <p:column headerText="Color (p4)" priority="4">
            <h:outputText value="color" />
        </p:column>
    </p:dataTable>
</h:form>

left phone, rigth pc

Upvotes: 1

Views: 3376

Answers (3)

Micha Herrmann
Micha Herrmann

Reputation: 71

PrimeFaces thinks the screen is bigger than it actually is. Tell iOS not to simulate a larger screen: 

<meta name="viewport" content="width=device-width"/>

You should now get the stacked version of your datatable.

<html xmlns...>
<h:head>
    <meta name="viewport" content="width=device-width"/>
</h:head>
<h:body>
    <p:dataTable ... reflow="true">
        (...)
    </p:dataTable>
</h:body>
</html>

Upvotes: 2

Nahla
Nahla

Reputation: 29

For the last comment ,this can help you ,if not done yet ,add 

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

to your and primeFaces responsive will work correctly

Upvotes: 1

Mathieu Castets
Mathieu Castets

Reputation: 6040

You might want to use the new reflow mode introduced in PrimeFaces 5.2 Community Edition.

enter image description here

Reflow mode is the best approach on mobile devices because it displays stacked columns

<p:dataTable var="car" reflow="true">

You can have a look at the second example in the PrimeFaces' showcase.

Upvotes: 1

Related Questions