Geek Answers Handbook

PrimeFaces scrollbar

I have a form with a datatable file that I set the column width for them in css:

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

Everything is fine, but when I add the attribute scrollable="true" to have a scrollable datatable, the result is worse:

enter image description here

This is a datatable declaration:

 <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? Thanks!

+7
source share
2 answers

I found a solution, you must edit the css code and JSF code at the same time and see what you have as a result. For my problem, I edited the css and 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:

  • Column 1: width = "25"
  • Column 2: width = "55"
  • Column 3: width = "369"
  • Column 4: width = "469"
  • Column 5: width = "170"
-3
source

You can set the column width in this way

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

or you can specify a style class this way

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

You can add scrollWidth something 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>
+2
source

More articles:


All Articles