如何修復<p:panelGrid>的列寬？

我正在研究JSF應用程序 我只是在調整panelGrid的列寬有疑問。如何修復<p: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">

我試圖

但它不工作，列寬是變化取決於第二列中。有人可以說爲什麼它發生？或者建議任何其他方式來做到這一點。

來源

2013-10-07 kark

我建議您同時使用<p:row />和<p:column />，如Showcase中所述。與<p:row />我管理simmilar 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>

來源

2013-10-07 13:17:48

雅感謝您的考慮..可我知道你使用''後感覺有什麼區別，因爲它不使用的是工作壓力太大 – kark

我只是想確定行跨度和colspan，這是明顯的選擇。 –

雅罰款這是一個grt的想法..謝謝你的朋友..它的工作 – kark

使用固定寬度不是很明智的做法。我建議你使用如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>

來源

2015-08-20 14:45:20

Yayyy謝謝 – Andrew

如何修復<p:panelGrid>的列寬？

回答

相關問題