Override overflow for gwt DockLayoutPanel widgets

css, docklayoutpanel, gwt, overflow, uibinder

Solution

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

Problem

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?

Original source