How to add a StyleName to the overlay Container

Flow
1

Hi.

I need to style the components of one view a little different. While I can add an StyleName to the view, it works fine as long as the components are in the view itself. No overlays are affected by the view’s stylename. I found the following div where I would need to add an additional css class.

<div id="xxx-911572173-overlays" class="v-app Xxx v-overlay-container" aria-live="assertive" aria-label="This content is announced automatically and does not need to be navigated into." aria-relevant="additions">

The problem is I can’t find a way to add a stylename on the serverside to that div. The only option I see is to mess around with JavaScript to add an CSS class (by selecting the div via its “v-overlay-container”), but I would prefer not to do that.

Thank you.

2

Hi,

I think the only thing that adds any classes to that element is the theme name of your UI. But adding/removing anything dynamically, I think you’re out of luck for now. You can
create a ticket
 for this issue if you wish.

Can you describe your use case? I’ve managed to get by without touching the overlays container. I must admit that I haven’t themed that many Vaadin 7 apps, much more Vaadin 6 apps, though. I was just wondering if we can figure out some other workaround than messing with JavaScript. Though creating a simple UI extension would be pretty trivial, which just adds/removes classes from the overlays container.