2 Replies Latest reply on Jul 12, 2012 11:04 AM by Thomas Victor

    How to set Width on rich:columns

    Thomas Victor Newbie

      rich:columns tag inside a data table. I need different width for different columns. I can some how get that width value from the server side, from a list. But how do I apply that width to each column that will be generated?

       

      I tried width attribute, it does nto seem to be working. I am using richfaces 3.3.3 Final .

       

      Please advice. Thanks in advance.

       






      <rich:columns value="#{imDashboardList.columnSelector.visibleColumns}"






      var="_theColumn"






      id="#{ e:concat(_theColumn, '_col')}"






      sortBy="#{invoiceTask[1][_theColumn]}"






      sortOrder="#{imDashboardList.sortOrder[_theColumn]}"






      styleClass="rich-table-cell-noborder grayAble"






      >

       

       







      <f:facet name="header">







      <h:outputText value="#{imDashboardList.columnSelector.getFromCamelCase(_theColumn)}" />






      </f:facet>






      <h:outputText







      id="#{_theColumn}"







      value="#{ValueTranslator.getDisplayString(invoiceTask[1], _theColumn, invoiceTask[1][_theColumn])}"






      />





      </rich:columns>
        • 1. Re: How to set Width on rich:columns
          shadowcreeper Apprentice

          I assume you have tried <rich:datatable columnClasses="col1style,col2style,..."> ?

           

          The columns may have similar attributes. Generally I try to modify table layouts by adding styles or classes using "width:XXpx;" or "width:XX%;" rather than table's width attribute (same goes for alignment, borders, padding, margin, etc).

          • 2. Re: How to set Width on rich:columns
            Thomas Victor Newbie

            My issue was that the column header was not wrapping, even though I set a width. To fix this issue, I had to modify cssclasses,

            .rich-table-subheadercell

            {

                white-space: normal !important;

            }

             

             

            .rich-table-sortable-header

            {

                white-space: normal !important;

            }

             

            Then set the width on rich:columns and on the control. as shown below.

             






            <rich:columns value="#{imDashboardList.columnSelector.visibleColumns}"






            var="_theColumn"






            id="#{ e:concat(_theColumn, '_col')}"






            sortBy="#{invoiceTask[1][_theColumn]}"






            sortOrder="#{imDashboardList.sortOrder[_theColumn]}"






            styleClass="rich-table-cell-noborder grayAble rich-table-sortable-header"






            headerClass="rich-table-sortable-header" index="columnsIndex"






            style="width:#{imDashboardList.columnSelector.getColumnWidth(_theColumn)}px;">

             

             







            <f:facet name="header">







            <h:outputText value="#{imDashboardList.columnSelector.getFromCamelCase(_theColumn)}" />






            </f:facet>






            <h:outputText style="width:#{imDashboardList.columnSelector.getColumnWidth(_theColumn)}px;"







            id="#{_theColumn}"







            value="#{ValueTranslator.getDisplayString(invoiceTask[1], _theColumn, invoiceTask[1][_theColumn])}"






            />





            </rich:columns>