PrimeFaces DataTable scrollBar

Question

Mam formularz z primefaces DataTable który mam ustawić szerokość kolumn w css dla niego:

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

Wszystko jest w porządku, ale kiedy dodać atrybut scrollable="true" w celu uzyskania przewijane DataTable , wynik jest najgorszy:

jest to deklaracja DataTable:

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

Na czym polega problem? Dziękujemy!

Answer 1

I znalazłem rozwiązanie, Musisz edytować css i kod JSF w tym samym czasie, il ooking co masz w rezultacie Dla mojego problemu edytowany mój css i JSF krok kodu po kroku, tutaj jest kod, który pracował dla mnie:

CSS:

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

postać:

1. Kolumna 1: szerokość = "25"
2. Kolumna 2: szerokość = "55"
3. Kolumna 3: szerokość = "369"
4. Kolumna 4: width = "469"
5. Kolumna 5: width = "170"

Answer 2

Można ustawić szerokość kolumny w ten sposób

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

lub można określić klasę stylów tędy

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

Możesz dodać scrollWidth pewne rzeczy jak ten

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