how can I adjust width of in ?

Question

I used width attribute as for all columns but In display, columns are not adjusted.

Can i get in this way? If, please guide me to achieve column widths as I desire

Answer 1

I suggest you use ui-grid-col css class as described in primefaces showcase . Where 12 = 100%

<div class="ui-grid ui-grid-responsive">
 <div class="ui-grid-row">
  <div class="ui-grid-col-2">
     <h:outputText value="To :" />
  </div>    
  <div class="ui-grid-col-4">
      <h:outputText value="#{bean.name}" />
  </div> 
</div>
<div class="ui-grid-row">
   <div class="ui-grid-col-2">
    <h:outputText value="Address :" />
  </p:column>  
  <div class="ui-grid-col-4">
    <p:outputLabel value="#{bean.address}" />  
  </div>
</div>

Answer 2

you must to use columnClasses attribute and separate every column style with comma(,). the code examples below show how to use columnClassess attribute.

in head tag:

<style type="text/css">
            .column1{width: 10px;height:auto}
            .column2{width: 5px;height:auto}
            .column3{width: 20px;height:auto}
           </style>

in body tag:

<p:panelGrid columnClasses="column1,column2,column3" columns="4" style="width: 100%" >  
                    <p:column></p:column>                        
                    <p:column></p:column>
                    <p:column></p:column> 
                    <p:column></p:column> 
                </p:panelGrid>  

it is works with h:panelGrid tag too.

Answer 3

you can either use a hard coded value:

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

or a percentage :

<p:column style="width:20%">

depending on what suits you best.