4

で列幅を調整することに疑問を持っているという点で、私は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">

私は試した

しかし、それは機能していません.2番目の列によって列幅が異なります。なぜそれが起こっているのか誰にも言えますか？または、これを行う他の方法を提案してください。

4

2 に答える 2

8

Showcaseで説明されているように、<p:row />との両方を使用することをお勧めします。私は同様のcssの問題をうまく処理することができました。このような：<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>
于 2013-10-07T13:17:48.500 に答える
1

固定幅を使用することはあまりお勧めできません。primefaces ショーケースで説明されているように、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-20T14:45:20.173 に答える