Problem choosing collapsed table columns

Hi,

I have a table with a huge number of columns that can be collapsed / uncollapsed by the user. After the user clicks the small button in the upper right corner of the table header, a list of all possible columns appears (default behaviour of table after "setColumnCollapsingAllowed(true)).

My problem: This list exceeds the lower edge of the browser and doesn´t have a scrollbar, so lots of the content cannot be made visible. How can I attach a scroll bar to that column list?

Thanks,
Stefan
12638.png

Whoah, that’s a big table :slight_smile:

If I were you, I’d handle that with a custom component (a popover of some sort) and populated the ‘columns’ as checkboxes. This selection would be communicated back to the server, that would do a setVisibleColumns() on the Table. This solution would have the additional benefit of not actually sending all that data to the client side (which it does now), and you can group the items a bit better.

If your intent on using a scrollbar, it can probably be done with some css-trickery, setting the height and overflow settings.

Indeed a wide table, but the data of the hidden columns is not sent to the client. There´s server-side code that evaluates which columns are visible and only populates those. If the user makes additional ones visible, their values are lazily loaded per column and row. This seems to work quite good.

As I´m still a novice to vaadin, developing a custom client side component exceeds my current capabilities by far, so I´d really prefer the scrollbar solution. I´ve already tested with several CSS properties, but I wasn´t successful. Does anyone have an idea how to influence the scrollbar appearance for that popup using CSS?

Thanks,
Stefan

No one? :frowning:

You can try over-riding the “gwt-MenuBar” property and setting the max height;

.v-contextmenu .gwt-MenuBar{

	overflow:auto;
	max-height: 600px; 
	height:auto !important; 
}

Aziz,

Thank you very much, that solved my problem!

Stefan