Как исправить ширину столбца ‹p:panelGrid›?

Я работаю над 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
person kark    schedule 07.10.2013    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Я предлагаю вам использовать как <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>
person miroslav_mijajlovic    schedule 07.10.2013
comment
Да, спасибо за ваше внимание. Могу я узнать, какую разницу вы почувствуете после использования <p:row>, потому что он работает и без его использования. - person kark; 07.10.2013
comment
Я просто хотел определить rowspan и colspan, и это был очевидный выбор. - person miroslav_mijajlovic; 07.10.2013
comment
@miroslav_mijajlovic для чистого кода вы можете указать атрибут columnClasses в сетке панелей, чтобы определить каждое соотношение столбцов и разместить только компоненты внутри сетки панелей, не беспокоясь о тегах строк и столбцов, вот пример <p:panelGrid columns="4" columnClasses="ui-grid-col-2, ui-grid-col-4, ui-grid-col-2, ui-grid-col-4" layout="grid"> - person Nwawel A Iroume; 22.09.2015

arrow_upward
1
arrow_downward

Не рекомендуется использовать фиксированную ширину. Я предлагаю вам использовать класс css ui-grid-col, как описано в презентации 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>

person andolsi zied    schedule 20.08.2015