8 Replies Latest reply on Jul 15, 2010 4:18 PM by Dennis Ranker

    Resizing <rich: scrollableDataTable> rows

    Dennis Ranker Newbie



      I'm working on a site using the richfaces scrollabledatatable, and I was wondering if there is an easy way to make the rows resizable similar to how the columns can be changed.  I have tried looking around but no simple solution seems readily available, so I would appreciate any help.

        • 1. Re: Resizing <rich: scrollableDataTable> rows
          Ilya Shaikovsky Master

          no out of the box solution.. and for now can't see custom ones also.

          • 2. Re: Resizing <rich: scrollableDataTable> rows
            Dennis Ranker Newbie

            Hmm well thanks for looking, if there is no simple solution to do this dynamically is there any way to simply make the rows have more lines? It appears the rowspan attribute does not work for the scrollableDataTable

            • 4. Re: Resizing <rich: scrollableDataTable> rows
              Maynard Witten Newbie

              specifically - if you want to specify it for one special component instance, then the following code in theme.css is sufficient:


              #MyFormID_MyScrollableDataTableID .rich-sdt-column-cell {
                 height: 50px;



              where MyFormID and MyScrollableDataTableId are id's for the respective components. Without #MyFormID_MyScrollableDataTableID, the redefined style will apply to every sdt in application.


              And question - is there way how to add rich:panel or any other more than one component in cell. My experience is that cell displays only some middle part of panel. Games with padding and margins gives nothing. It would be nice to add panel to cell - this can be substitute for lacking the column groups.

              1 of 1 people found this helpful
              • 5. Re: Resizing <rich: scrollableDataTable> rows
                Dennis Ranker Newbie

                Thank you for that suggestion, it is close to what I'm looking for, unfortunately, if text is multiple lines, even with an expanded row it cuts off the second line, I've attached a screenshot to show what I mean.

                • 6. Re: Resizing <rich: scrollableDataTable> rows
                  Maynard Witten Newbie

                  I am interested too in resolving this issues. There is no chance to use ExtendedDataTable, because it lacks horizontal scroll and while there are some workarounds how to add this horizontal scroll, it does not works sucesfullully: 1) any CSS (e.g. like








                  ) make the last row partially invisible (I guess there can be workaround too - make EDT nonsortable and add extra last fake row) and 2) there is no way how to freeze some first columns.


                  So - I am left with ScrollableDataTable. I made investigation that there is the following code in ScrollableDataTableBaseRenderer.java:


                  writer.writeText("#" + getNormalizedId(context, state.getGrid())+ " .rich-sdt-c-" + cell_index + " {", "width");

                                                      writer.writeText("width: " + width + "px;", "width");

                                                      writer.writeText("}", "width");


                  And this code can be resposible for rendering the column cell. cell_index is integer type, so - the CSS class for each individual cell is simply .rich-sdt-c-9999. But the strange thing is that - if I am save the HTML code (e.g. from Firefox view page source), then I cann't find the respective HTML code for this table - e.g. searc for rich-sdt-c gives nothing. Also - if I write the specifice value in the table cell - e.g. 88888, then this literal '88888' cann't be found in HTML code either. I see that there is some big JavaScript function that is doing something.


                  So - redefining rich-sdt-c-... in theme.css (with margins, padding, border width and so on) and actually - redefining CSS column cell styles etc. gives nothing to correct the height of the cell, althoug - redefinitaion (of column cell style) can work for font style and so on.


                  So - is there suggestion how to proceed?

                  • 7. Re: Resizing <rich: scrollableDataTable> rows
                    Nick Belaevski Master



                    Define your own CSS classes via component attributes (e.g. columnClasses and do customization via them).

                    • 8. Re: Resizing <rich: scrollableDataTable> rows
                      Dennis Ranker Newbie

                      Could you explain what you mean? I'm somewhat new to this and I feel so close to fixing this, I just need the column to display more than 1.5 or so lines of text (even when the actual row is resized)