CODEWITHSUNDEEP
cssjsfprimefacesjsf-2.2
kark
kark

Reputation: 4853

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

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

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.

Upvotes: 4

Views: 30784

Answers (2)

miroslav_mijajlovic
miroslav_mijajlovic

Reputation: 1731

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>

Upvotes: 8

andolsi zied
andolsi zied

Reputation: 3791

It's not very advisable to use fixed width. I suggest you use ui-grid-col css class as described in primefaces showcase .

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

Upvotes: 1

Related Questions