PrimeFaces datatable Scrollbar

Question

I have a form with a primefaces datatable which i have set the columns width in css for it :

.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 10px}

Everything is okay but when i add the scrollable="true" attribute in order to have a scrollable datatable, the result is worst :

This is the declaration of the datatable :

<p:dataTable  id="dtable" var="todos" value="#{todo.todoList}" scrollable="true" 
                             resizableColumns="false" scrollHeight="300" lazy="true"
                             styleClass="idcol,prioritycol,titlecol,descriptioncol,actionscol">

What is the problem? Thank you!

Answer 1

You can set the column width this way

<p:column headerText="Type"  width="70%"> 

or you can specify style class this way

<p:column headerText="Type"  styleClass="idcol"  >

You can add scrollWidth some thing like this

<p:dataTable var="data"  rowKey="#{data.key}" style="width:70%" 
sortOrder="ascending"
selection=""
value=""
selectionMode="single"
scrollable="true" 
scrollWidth="71%" 
scrollHeight="3%"
>

<p:ajax event="rowSelect" listener=""
update="" />

<p:column headerText="Type"  styleClass=""  sortBy="" width="70%">
<h:outputText id="dataTYpe" value="" />
</p:column>

<p:column headerText="Category"  sortBy="" width="30%">
<h:outputText value="" />
</p:column>

</p:dataTable>

Answer 2

I found the solution, You have to edit you css and you JSF code at the same time and looking what you have as result, For my problem i edited my css and the jsf code step by step, here is the code that worked for me :

CSS :

.idcol{width: 5%}
.prioritycol{width: 5%}
.titlecol{width: 30%}
.descriptioncol{width: 40%}
.actionscol{width: 20%}

The Form :

1. Column 1 : width="25"
2. Column 2 : width="55"
3. Column 3 : width="369"
4. Column 4 : width="469"
5. Column 5 : width="170"