Custom scrollbars for <vaadin-combo-box> , impossible?!

Flow
1

Hi,
I’m using vaadin-combo-box and I have a problem. I have no clue how to customize look and feel of scrollbars for the dropdown. I read about styling parts and I know how to do it but this seems to be impossible. Cant figure out the way to select #scroller element because it has been design not to be a “part” to style. However that is the only way I can think of to apply custom style to dropdown scrollbars. How can that be accomplished?

Thanks in advance for help.

2

As far as I know, the ::-webkit-scrollbar styles inherit, so you should be able to set them on the vaadin-combo-box-overlay element directly and have them applied on the internal #scroller element.

3

Well, unfortunately it seems that the one additional shadow root prevents the scrollbar selectors from applying on the #scroller element.

4

Jouni Koivuviita:
Well, unfortunately it seems that the one additional shadow root prevents the scrollbar selectors from applying on the #scroller element.

Thanks Jouni for your reply. Is there a plan to allow this in the future release? I believe it is essential, especially for hybrid mobile apps to allow styling this part.

For now I think the only way of customizing it is to create custom component that extends and overrides template that is responsible for styling #scroller.

5

For now I think the only way of customizing it is to create custom component that extends and overrides template that is responsible for styling #scroller.

Yes. Unfortunately from your perspective it is so. If you make a copy of the html file in directory with same name as is used in vaadin-combo-box webjar, that file is used instead of the webjar and you can apply changes directly to it. Of course this means that you need to manually update the file if there are changes in new versions of the vaadin-combo-box.

6

For now I think the only way of customizing it is to create custom component that extends and overrides template that is responsible for styling #scroller.

Yeah, so it seems.

Is there a plan to allow this in the future release?

No plan at the moment. The first step is to create an issue in GitHub: https://github.com/vaadin/vaadin-combo-box/issues