如何固定 <p:panelGrid> 的列宽？

Question

我正在处理一个JSF应用程序，我只是在调整panelGrid中的列宽度方面有一些疑问。

我的代码如下：

<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>

我想要固定第一列的宽度为250像素，所以我在代码中添加了如下内容：

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

我尝试过以下方法：

• 如何调整<p:panelGrid>中<p:column>的宽度？
• 如何改变PrimeFaces面板网格的列宽度？

但是这些方法都不起作用，列宽度会随着第二列的变化而变化。有人能解释一下为什么会发生这种情况吗？或者有其他方法可以实现我的需求吗？

- kark

Answer 1

我建议您使用在Showcase中描述的<p:row />和<p:column />。使用<p:row />，我成功解决了类似的CSS问题。像这样：

<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>

- miroslav_mijajlovic

---

谢谢您的考虑。我想问一下，在使用<p:row>之后，您感觉有什么不同吗？因为没有使用它也可以正常工作。 - kark

我刚想定义rowspan和colspan，这是显而易见的选择。 - miroslav_mijajlovic

@miroslav_mijajlovic 为了编写干净的代码，您可以在panelgrid中指定columnClasses属性来定义每个列的比例，并且只需将组件放置在panelgrid内部，而无需担心行和列标记。以下是一个示例：<p:panelGrid columns="4" columnClasses="ui-grid-col-2, ui-grid-col-4, ui-grid-col-2, ui-grid-col-4" layout="grid"> - Nwawel A Iroume

Answer 2

使用固定宽度并不是很明智。我建议您使用ui-grid-col CSS类，如primefaces展示中所述。

<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>

- andolsi zied