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

    How to set Width on rich:columns

    tvictor Jul 6, 2012 6:29 PM

      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>
      • 5148 Views
      • Tags:
        • 1. Re: How to set Width on rich:columns
          shadowcreeper
          shadowcreeper Jul 6, 2012 9:53 PM (in response to tvictor)

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

            • Actions
          • 2. Re: How to set Width on rich:columns
            tvictor Jul 12, 2012 11:04 AM (in response to shadowcreeper)

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