CODEWITHSUNDEEP
primefacesdatatable
rachid
rachid

Reputation: 11

Primefaces column vertical-text

I have a dataTable with 22 columns but I will style 8 of them vertical I am using this dataTable 

<p:dataTable var="car" value="" paginator="true" rows="5" style=".ui-datatable th { writing-mode: tb-lr; }"
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                 rowsPerPageTemplate="5,10,15"  id="carTable" lazy="true">
        <p:ajax event="rowSelect" update=":form" oncomplete="PF('carDialog').show()" />
        <p:column headerText="column1" sortBy="" filterBy="">
            <h:outputText value="" />
        </p:column>
<p:column headerText="column2" sortBy="" filterBy="">
            <h:outputText value="" />
        </p:column>
......
<p:column headerText="column22" sortBy="" filterBy="">
            <h:outputText value="" />
        </p:column>

Image :

enter image description here

how I can make this?

Upvotes: 0

Views: 1302

Answers (1)

Shadowritter
Shadowritter

Reputation: 137

Add css writing-mode : vertical-lr (or vertical-rl if you want to try) to your column for recent browser

You may want this for old browser

-ms-writing-mode: tb-rl; /* old IE 6 and 7 */
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;

Check this for compatibility

You may want to use styleClass="verticalText" and put this in your CSS file

.verticalText{
   writing-mode : vertical-lr;
  -ms-writing-mode: tb-rl; /* old IE 6 and 7 */
  -webkit-writing-mode: vertical-rl;
}

And go with <f:facet name="header"> instead of headerText

<p:column>
  <f:facet name="header">
    <h:outputText value="Title"/>
  </f:facet>
</p:column>

Another solution, use image replace the outputText by <h:graphicImage name="verticalheader.png" /> see this answer

Upvotes: 2

Related Questions