如何修复 <p:panelGrid> 的列宽？答案

【问题标题】：How to fix the column width of <p:panelGrid>?如何修复 <p:panelGrid> 的列宽？
【发布时间】：2013-10-07 12:18:11
【问题描述】：

我正在开发 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>

这里我想修复250px的第一列的宽度，所以我提到了

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

我试过了

但它不起作用，列宽取决于第二列。谁能说出为什么会这样？或者建议任何其他方式来做到这一点。

【问题讨论】：

标签： css jsf primefaces jsf-2.2

【解决方案1】：

我建议您同时使用<p:row /> 和<p:column />，正如Showcase 中所述。使用<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>

【讨论】：

谢谢您的考虑.. 我可以知道您在使用<p:row> 后有什么不同，因为它也可以在不使用它的情况下工作
我只想定义 rowspan 和 colspan，这是显而易见的选择。
@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">

【解决方案2】：

不建议使用固定宽度。我建议你使用 primefaces showcase 中描述的 ui-grid-col css 类。

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

【讨论】：