Overriding overflow in layouts

General
1

Hi everyone,

I’m developing a web application using Vaadin and trying out some CSS popups. The popups are embedded into a customlayout using div blocks, that are made visible on mouse hover.

The problem here seems to be Vaadin is adding style=“overflow: hidden” statements to it’s layouts and their subcells. This effectively stops the popups from working, as the popup will not be visible in surrounding layout cells.

Is there a way to simply remove these CSS attributes from layouts like horizontal/vertical layout classes?

Thanks, Marko

2

Short answer, yes:

.v-verticallayout,
.v-verticallayout > div,
.v-verticallayout > div > div {
   overflow: visible !important;
}

One caveat: that selector doesn’t work in IE6, and I don’t know a way to make it work universally for IE6. Isolated cases may work with the following:

.v-verticallayout,
.v-verticallayout div {
   overflow: visible !important;
}


Long answer

I’d be very careful with this, since the overflows will very definitely affect the layout size calculations. Some cases may work, others may fail miserably. So use with caution.

And then there’s the IE6 issue, which would need another workaround…