在p:datatable中对齐h:outputText

时间:2014-01-17 08:18:36

标签: css jsf primefaces

我有一个<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,则所有数据表也会在其他屏幕中更改。
因此我想将更改仅应用于上述数据表而不是其他数据表。

我怎样才能实现它?

3 个答案:

答案 0 :(得分:20)

对于较旧的PrimeFaces版本(5.2之前版本),请使用此代码使其左对齐为。

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

对于较新的PrimeFaces版本,请参阅the answer below,您可以将样式放在列上

答案 1 :(得分:2)

您还可以将style属性与float选项一样使用;

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

答案 2 :(得分:1)

在现代PrimeFaces版本(&gt; 5.1)中,内容周围的div不再呈现,因此问题以不同方式解决(因为当您使用Qadir Hussain回答时,如果网页处于移动视图列值中列名称下方显示(预期与列名称相反))。

列内容的内容&#39;内容&#39;在最近的PrimeFaces版本中不再存在,所以以下&#39;只是工作&#39;

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

因此,您可以为元素提供样式或类或两者,这将解决您的响应或更复杂的问题。