Override overflow for gwt DockLayoutPanel widgets
I'm creating a page with a navigation menu on the left, containing icons for each section. The page layout looks something like this:
<g:DockLayoutPanel unit="PX">
<g:west size="55"><g:SimplePanel ui:field="navigation" /></g:west>
<g:center>
<g:ScrollPanel>
<g:Whatever ui:field="content" />
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>
Hovering on each of the icons of the navigation bar is supposed to show a balloon containing the title of the item, and some sub-items. I achieved the effect by CSS, giving each balloon a position relative to its icon.
The g:west element is rendered as
<div style="
position: absolute;
overflow: hidden;
left: 0px;
top: 0px;
bottom: 0px;
width: 55px; ">
My problem is that overflow: hidden .
How do I tell the DockLayoutPanel that it is OK for the west element to overflow over the center element?
Edit: I found a workaround which is quite reliable
navigation.getElement().getParentElement().getParentElement().getStyle()
.setOverflow(Overflow.VISIBLE);
Does anybody know a solution which doesn't mess with HTML elements?
You can override inlined style of the north div:
<ui:style>
.dockLayoutPanel > div {
overflow: visible !important;
}
</ui:style>
<g:DockLayoutPanel unit="PX" width="100%" height="100%" addStyleNames="{style.dockLayoutPanel}">
<g:north size="46">
...
</g:north>
</g:DockLayoutPanel>
Tested with GWT 2.6.1.
You could find more suggestions here: https://github.com/gwtbootstrap/gwt-bootstrap/issues/231
An alternative would be to use the PopupPanel showing a custom balloon widget, styled accordingly. You can then handle your navigation icons' MouseOverEvent and MouseOutEvent to set up the content of, show and hide your balloon.