Aligning h:outputText inside a p:datatable

3
votes

I have an <h:outputText value="#{xx.nameame}" /> which is given below 

<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>

I want to align the values coming for this field <h:outputText value="#{xx.nameame}" /> in left side of the cell example : text-align:left

But the problem is that JSF itself, considering the column as div tag, is assigning the the css by default which is:

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

Due to the above, the text is aligned center. If I change the above to text-align: to left, all the datatable will get changed in other screens too.
Hence I want to apply the change only to the above datatable and not for the others.

How can I achieve it?

3
cssjsfprimefaces
What is the rendered html for this? - Sowmya
'JSF' is not considering the column as a div, it is PrimeFaces in older versions that rendered a div around the content. The column cell is still a <td>. So highly upvoted answer is not relevant anymore in recent PF versions and you can 'just' add a style(class) on the column. And in this case a more specific selector would have helped too to apply it to just one datatable... All basic css - Kukeltje

3 Answers

20
votes

For older PrimeFaces versions (pre 5.2), use this code to make it left align as.

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

For newer PrimeFaces versions, see the answer below where you can just put the style on the column

2
votes

You can also use style property with float option like;

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

In modern PrimeFaces versions (> 5.1) the div around the content is not rendered anymore, so the problem was solved in a different way (Because when you use Qadir Hussain answer, if the web page is in mobile view column value is shown below of the column name(expected at the opposite of the column name)).

The div around the content of the column 'content' is not present anymore in recent PrimeFaces versions so the following 'just works'

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

So you can give a style or a class or both to element, that will solves your responsive or more complicated issues.