Override-Überlauf für gwt DockLayoutPanel Widgets

Question

Ich erstelle eine Seite mit einem Navigationsmenü auf der linken Seite, die Symbole für jeden Abschnitt enthält. Das Seitenlayout etwas wie folgt aussieht:

<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> 

auf jedem der Symbole der Navigationsleiste Schwebend sollte einen Ballon zeigt den Titel des Elements enthält, und einige Unterpunkte. Ich erreichte den Effekt durch CSS und gab jedem Ballon eine Position relativ zu seinem Symbol.

Die g: west Element als

<div style=" 
    position: absolute; 
    overflow: hidden; 
    left: 0px; 
    top: 0px; 
    bottom: 0px; 
    width: 55px; "> 

Mein Problem gemacht wird, ist, dass overflow: hidden.

Wie kann ich dem DockLayoutPanel mitteilen, dass es OK ist, dass das Element west über das zentrale Element überläuft?

Edit: ich eine Abhilfe gefunden, die sehr zuverlässig ist

navigation.getElement().getParentElement().getParentElement().getStyle() 
    .setOverflow(Overflow.VISIBLE); 

Weiß jemand eine Lösung, die mit HTML-Elementen nicht Chaos tut?

Answer 1

können Sie inlined Stil des Nordens div außer Kraft setzen:

<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> 

Getestet mit GWT 2.6.1.

Sie könnten weitere Vorschläge finden Sie hier: https://github.com/gwtbootstrap/gwt-bootstrap/issues/231

Answer 2

Eine Alternative wäre die PopupPanel mit einem benutzerdefinierten Ballon-Widget, entsprechend gestaltet. Sie können dann Ihre Navigationssymbole "MouseOverEvent" und "MouseOutEvent" bearbeiten, um den Inhalt Ihrer Sprechblase einzurichten, anzuzeigen und auszublenden.