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>

我想在250px的第一列修改宽度，所以我提到了

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

我试过

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

Answer 1

我建议您使用<p:row />中描述的<p:column />和<p:row />。使用<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>我可以解决simmilar css问题。像这样：

{{1}}

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

如何修复<p：panelgrid>？</p：panelgrid>的列宽

2 个答案: