Can't get horizontal scroll bar displayed for the Table

I was wondering if someone here can help with this… I’m trying to do very basic and simple thing - have a table with 20 columns. This table doesn’t fit into the screen, so I would like it to be 100% width & have horizontal scroll bar for contents. Using vaadin 6.7.1. Here the code for Table init:

[font=Courier New]
public void initTableArea()
{
tablePanel.setSizeFull();
tablePanel.setScrollable( true );
//tablePanel.setStyleName( Runo.PANEL_LIGHT );

   for(String columnName: HCConstants.RECORD_FIELDS)
   {
      tableHCReport.addContainerProperty( columnName, String.class, null );
   }

   tableHCReport.setSelectable( true );
   tableHCReport.setColumnCollapsingAllowed( true );
   tableHCReport.setSizeUndefined();
   tableHCReport.setPageLength( 20 );
   tableHCReport.setStyleName( Runo.TABLE_SMALL );
   
   tablePanel.addComponent( tableHCReport );
}

[/font]

Result is attached. No horizontal scroll bar. I’ve already spent an hour browsing through this forum and google, however didn’t find the solution.


Sergey
11975.jpg

I think the reason for this is that you don’t have any actual rows in the table only a header row.

Hmm… I was expecting that table will show the scroll bar in any case, i.e. doesn’t depend on actual rows number. I’ve also tried to add some empty items with table.addItem() - scroll bar was not displayed and also empty rows were displayed with very small height (design intent as well??). I’m going to try adding rows with actual values to test the behavior…


Sergey

Hi,

Table doesn’t have horizontal scroll bar, but you can put it inside a Panel which can have one. You’ll just need to set undefined width for both the Table and the root layout of the panel.

A related Knowledge Base article:
#217: How do I add scroll bar or bars to a component?
(Pro Account required).
An example
with a component inside a Window and
here’s
another with a component inside a Panel.

Marko, thanks a lot!

The following resolved the issue:
panel.getContent().setSizeUndefined();


Sergey

I faced the same issue and applied the solution provided here, but it caused another issue that is inconvenient to the user. That is the table vertical scroll bar is hidden and user needs to scroll to the right to see the vertical scroll bar.
I can not use the panel vertical scroll bar too, as the table uses the lazy loading based on its vertical scroll bar.

–Farid

I had the same problem. Try to set a width on the table, that should activate horizontal scrollbars.

Here is a related defect ticket:
#9187