Rectangle 27 21

You can qualify your columns inside the panelGrid using columnClasses. The following code sets different width and stick the cells content aligned to the top-side.

<h:panelGrid columns="2" style="width: 100%" columnClasses="forty-percent top-alignment, sixty-percent top-alignment">
.forty-percent {
     width: 40%;
}

.sixty-percent {
     width: 60%;
}

.top-alignment {
     vertical-align: top;
}
<p:panelGrid columns="4" columnClasses="ui-grid-col-2, ui-grid-col-4, ui-grid-col-2, ui-grid-col-4" layout="grid">...  </p:panelGrid>

I like more the answer from @NwawelAIroume as it sticks with the CSS framework and doesn't add any extra CSS (which maybe one day break responsiveness).

jsf - How can I change column width of panel grid in PrimeFaces - Stac...

jsf primefaces
Rectangle 27 8

<p:panelGrid style="width:100%"> # notice that I do not define columns attribute in p:panelGrid!!
    <f:facet name="header"> # header
        <p:row> # p:row and p:column are obligatory to use since we do not define columns attribute!
            <p:column colspan="2"> # here I use colspan=2, coz I have 2 columns in the body
                Title
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column style="width:150px"> # define width of a column
            Column 1 content
        </p:column>
        <p:column> # column 2 will fill the rest of the space
            Column 2 content
        </p:column>
    </p:row>

    <f:facet name="footer"> # similar as header
        <p:row>
            <p:column colspan="2">
                Footer content
            </p:column>
        </p:row>
    </f:facet>
</p:panelGrid>

So as you can see, the main difference is that you do not define columns attribute in p:panelGrid. In header and footer you have to use p:row and p:column, and in my case I also have to use colspan=2 since in body we have 2 columns.

jsf - How can I change column width of panel grid in PrimeFaces - Stac...

jsf primefaces
Rectangle 27 6

Have you considered the style attribute ? Example :

<p:panelGrid columns="2" style="width: 50px">
<p:column style="width:50px">

thanks Gloserio, but it still not working : the width of a one column is relative to the content in this column; also <h:outputLabel> in the first column is not aligned with the <p:inputText> in the second column

You should maybe post your code and what you expect from it for further help.

@Akheloes <p:panelGrid columns="2" style="width: 50px"> won't work (be it px or % btw) -- the rendered table still remains as large as the screen

jsf - How can I change column width of panel grid in PrimeFaces - Stac...

jsf primefaces
Rectangle 27 0

Have you considered the style attribute ? Example :

<p:panelGrid columns="2" style="width: 50px">
<p:column style="width:50px">

thanks Gloserio, but it still not working : the width of a one column is relative to the content in this column; also <h:outputLabel> in the first column is not aligned with the <p:inputText> in the second column

You should maybe post your code and what you expect from it for further help.

jsf - How can I change column width of panel grid in PrimeFaces - Stac...

jsf primefaces
Rectangle 27 0

Maybe you can give a quick working example with an additional source? Or even mark this question as duplicate.

jsf - How can I change column width of panel grid in PrimeFaces - Stac...

jsf primefaces
Rectangle 27 0

You can qualify your columns inside the panelGrid using columnClasses. The following code sets different width and stick the cells content aligned to the top-side.

<h:panelGrid columns="2" style="width: 100%" columnClasses="forty-percent top-alignment, sixty-percent top-alignment">
.forty-percent {
     width: 40%;
}

.sixty-percent {
     width: 60%;
}

.top-alignment {
     vertical-align: top;
}

jsf - How can I change column width of panel grid in PrimeFaces - Stac...

jsf primefaces
Rectangle 27 0

<p:panelGrid style="width:100%"> # notice that I do not define columns attribute in p:panelGrid!!
    <f:facet name="header"> # header
        <p:row> # p:row and p:column are obligatory to use since we do not define columns attribute!
            <p:column colspan="2"> # here I use colspan=2, coz I have 2 columns in the body
                Title
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column style="width:150px"> # define width of a column
            Column 1 content
        </p:column>
        <p:column> # column 2 will fill the rest of the space
            Column 2 content
        </p:column>
    </p:row>

    <f:facet name="footer"> # similar as header
        <p:row>
            <p:column colspan="2">
                Footer content
            </p:column>
        </p:row>
    </f:facet>
</p:panelGrid>

So as you can see, the main difference is that you do not define columns attribute in p:panelGrid. In header and footer you have to use p:row and p:column, and in my case I also have to use colspan=2 since in body we have 2 columns.

jsf - How can I change column width of panel grid in PrimeFaces - Stac...

jsf primefaces