vaadin grid - collapse column menu broken when using with many columns

Hi there, I just opened an issue here https://github.com/vaadin/framework/issues/9569 but I don’t know if I’m right there.
So I do c&p:

[…]
There is an issue with vaadin grids when using it with many columns in IE11 (Firefox works as expected):
If the menu for hiding columns is longer then the window allows, which means that the scrollbar is added, you can’t select entries below the 1st page. The list “jumps back” as soon as you move the mouse over an item.
This is reproducable with the vaadin sampler https://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/features

  1. shorten the browser window to ensure that the opened “hamburger menu” for hiding columns doesn’t fit into the window to force the scrollbar to be shown
  2. click the “hamburger menu”
  3. scroll down a bit (scrollbar moves as expected)
  4. (try to) move the mouse over a specific entry
    → menu scrolls back to start; you can’t select the entry you want.

If you move the selected entry using the cursor keys the selected entry moves out of the visible frame - probably to the “wanted entry”.

Ah - for the protocol:
I’m using Vaadin 7.7.9 (no I can’t port to Vaadin 8 due to the plugins used) with IE 11.0.9600.18665 Updateversion 11.0.42 (and this is not changeable).

I’d be glad if this could be fixed soon …
[…]

Volker

Nobody nothing? Too bad :frowning:

Really nothing? The grid’s {{grid.getColumn(propery).setHidable(true)}} is not usable for me (since I’ve to provide more then 50 columns in a grid as “available columns”) but user can’t select the ones that require scrolling in the popup.

I took a brief look to this issue and yes, I can confirm it. It seems to be bug in IE11 that has been fixed in Edge. I also commented your GitHub report. Thanks for reporting this issue.

Thanks for your answer - now I don’t feel so allone anymore :wink:

I just had a brief look into the disscussion mentioned in your answer in github. Do I interpret it correctly: A workaround could be to disable the “default” scrollbar for IE via css and use another one - named “perfect-scrollbar”?

Unfortunately I’m really a stroke using js/css (it’s usually more “guessing” then “writing” - that’s one of the reasons for me to use vaadin that abstracts this level of web dev nearly completely). So may I ask for help?