Override overflow for gwt DockLayoutPanel widgets

Question

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?

Answer 1

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

Answer 2

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.