簡體   English   中英

在h:datatable中對齊h:outputText

[英]Aligning h:outputText inside a p:datatable

我有一個<h:outputText value="#{xx.nameame}" /> ,如下所示

<p:dataTable>
  <p:column width="200"  >
    <f:facet name="header"    >
      <h:outputText value="Header1" />
    </f:facet>
    <h:panelGroup rendered="#{xx.addFlag == false}">
      <h:outputText value="#{xx.nameame}" />
    </h:panelGroup>
  </p:column>
</p:dataTable>

我想在單元格示例的左側對齊此字段的值<h:outputText value="#{xx.nameame}" />text-align:left

但問題是JSF本身,將列視為div標簽,默認情況下分配css,即:

.ui-dt-c {
     white-space: normal;
     text-align: center;
}

由於上述原因,文本對齊中心。 如果我將上面的text-align: to left更改為text-align: to left ,則所有數據表也將在其他屏幕中更改。
因此,我想將更改僅應用於上述數據表而不是其他數據表。

我怎樣才能實現它?

對於較舊的PrimeFaces版本(5.2之前的版本),請使用此代碼使其保持對齊狀態。

<div align="left"><h:outputText value="#{xx.nameame}" /></div>

對於較新的PrimeFaces版本,請參閱下面的答案 ,您可以將樣式放在列上

你也可以使用帶有float選項的style屬性;

<h:outputLabel value="Max" style="float:left" />

在現代PrimeFaces版本(> 5.1)中,內容周圍的div不再呈現,因此問題以不同的方式解決(因為當您使用Qadir Hussain回答時,如果網頁在移動視圖中,列值顯示在下面列名(預期與列名相反))。

在最近的PrimeFaces版本中,“內容”欄目內容的div不再存在,因此以下“正常工作”

<p:column style="text-align: left" class="TexLeft">
......
....
</p:column>

因此,您可以為元素提供樣式或類或兩者,這將解決您的響應或更復雜的問題。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM