Problem setting column widths in scrollableDataTable
I'm using RF 3.3.3.Final I have a scrollableDataTable for which the number, position, and contents of columns are dynamically determined.
To do this I use the following markup:
<rich:scrollableDataTable id="queryResult" value="#{queryBean.results}" var="outRow" columnClasses="queryBean.columnClasses">
<rich:columns value="#{queryBean.resultHeaders}" var="hdr" index="idx" headerClass="#{queryBean.colClass[idx]}">
<f:facet name="header">
<h:outputText value="#{hdr}" styleClass="#{queryBean.colClass[idx]}"/>
</f:facet>
<h:outputText value="#{outRow[idx]}" escape="false" styleClass="#{queryBean.colClass[idx]}"/>
</rich:columns>
</rich:scrollableDataTable>
The output of "queryBean.columnClasses" is a comma delimited string containing the appropriate, predefined CSS class names for the columns generated. The colClass[] contains an array version of the same with one entry per array element.
For the most part this works fine. However, the content of each column is truncated at 100px width, regardless of the widths set in the CSS classes for the columns. The columns themselves, as indicated by their borders, are generated and styled correctly including the width - only the contents are truncated. When I check the output style information using Firebug I see the following when I select the div that actually contains the cell contents:
#queryResult .rich-sdt-c-0 {
width: 100px;
}
.col200 {
width:200px; <-- this one is lined out indicating it is overridden by the value above it
}
.<... further style elements ...>
I tried altering definition for rich-sdt-c-0 in a .css file but that just gives me the following result:
#queryResult .rich-sdt-c-0 {
width: 100px;
}
.rich-sdt-c-0 {
width: 200px; <-- this one also is lined out indicating it is overridden by the value above it
}
.col200 {
width:200px; <-- this one is lined out indicating it is overridden by the value above it
}
.<... further style elements ...>
Altering the theme definition is not a viable solution, even if it might correctly size the column, because the column style required, in particular the width) is determined dynamically based on the data selected by the user.
If I resort to fixed, individual rich:column tags instead of using the rich:columns tag then the columns and contents are all styled correctly. This appears to be a bug in the rendering of the rich:columns tag.
Can anyone point me to a style/styleClass setting I may have overlooked? If not, I would appreciate any suggestions for alternative approaches. The only thing I've come up with would be to bind the table definition server-side and generate it all there. I haven't tried this yet and was hoping to avoid it.