How to fix the column width of <p:panelGrid>?

Question

I am working on JSF application in that I am just having a doubt in adjusting the column width in panelGrid.

My code is :

<p:panelGrid id="grid" columns="2" cellpadding="5"  styleClass="panelGrid"
    style="border:none;margin:0 auto;width:500px;"   >  
    <p:column style="width:250px">
        <h:outputText value="To :" />
    </p:column>    
    <p:column style="width:250px">
        <h:outputText value="#{bean.name}" />
    </p:column>    
    <p:column style="width:250px">
        <h:outputText value="Address :" />
    </p:column>  
    <p:column style="width:250px">
        <p:outputLabel value="#{bean.address}" />  
    </p:column>
</p:panelGrid>

Here I want to fix the width if first column for 250px, so I mentioned

<p:column style="width:250px">

I tried

• how can I adjust width of <p:column> in <p:panelGrid>?
• How can I change column width of panel grid in PrimeFaces

But it is not working, column width is varying depend upon second column. Can anybody say why it is happening? Or suggest any other way to do this.

Answer 1

I suggest you to use both <p:row /> and <p:column /> as it is described in Showcase. With <p:row /> I managed simmilar css problem to work. Like this:

<p:panelGrid id="grid" columns="2" cellpadding="5"  styleClass="panelGrid" style="border:none;margin:0 auto;width:500px;"   >  
   <p:row>
      <p:column style="width:250px">
         <h:outputText value="To :" />
      </p:column>    
      <p:column style="width:250px">
          <h:outputText value="#{bean.name}" />
      </p:column> 
   </p:row>
   <p:row>
       <p:column style="width:250px">
        <h:outputText value="Address :" />
      </p:column>  
      <p:column style="width:250px">
        <p:outputLabel value="#{bean.address}" />  
      </p:column>
   </p:row>
  </p:panelGrid>