overlay being moved to document.body makes styling items difficult

[ktiedt]

Is there some trick to managing styles for this?

[Saulis]

Hi there!

Currently, you need to unfortunately set a global style for vaadin-combo-box-overlay to be able to style it. If you need to style various combo-boxes differently, you need to set an id or a custom class to the specific overlay using combobox1.$.overlay and then use a CSS selector specific to that overlay.

This was a tradeoff when we decided to place the overlay under document.body, but we might need to reconsider this when we start working on styling and templating support.

[jouni]

One of the main reasons for moving it under body was to escape any stacking contexts that might crop the overlay element. We currently have the same issue now in vaadin-date-picker, where we still use iron-dropdown: vaadin/vaadin-date-picker#133

HTML5 <dialog> element would be the obvious solution to this issue, but unfortunately it’s not supported anywhere really (Chome has it under a flag): http://caniuse.com/#search=dialog

So either we accept a less convenient way of styling, or we accept the limitation of using these elements inside any overflow: hidden elements with their own stacking context. Both options suck for their own reasons.

[panuhorsmalahti]

Setting a global style wouldn't work with a native Shadow DOM, right?

I was thinking that setting styles with combobox1.$.overlay.style would be an option here too.

[Saulis]

I'm going to close this ticket as #165 was fixed – we'll be releasing the new custom item template support shortly. Meanwhile, you can already check the master branch how it works.

Feel free to re-open the ticket or open a new one if there are some use cases you feel is not achievable.