Override overflow per gwt DockLayoutPanel widget

Question

Sto creando una pagina con un menu di navigazione sulla sinistra, contenente icone per ogni sezione. Il layout di pagina simile a questa:

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

Passando su ciascuna delle icone della barra di navigazione dovrebbe mostrare un palloncino che contiene il titolo della voce, e alcune voci secondarie. Ho ottenuto l'effetto dai CSS, assegnando a ciascun fumetto una posizione relativa alla sua icona.

Il g: elemento ovest è reso come

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

mio problema è che overflow: hidden.

Come faccio a dire al DockLayoutPanel che va bene che l'elemento ovest trabocchi sull'elemento centrale?

Edit: Ho trovato una soluzione che è abbastanza affidabile

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

Qualcuno sa una soluzione che non pasticciare con gli elementi HTML?

Answer 1

È possibile ignorare lo stile inline del div nord:

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

testato con GWT 2.6.1.

Si potrebbe trovare ulteriori suggerimenti qui: https://github.com/gwtbootstrap/gwt-bootstrap/issues/231

Answer 2

Un'alternativa sarebbe utilizzare lo PopupPanel che mostra un widget di fumetto personalizzato, con lo stile corrispondente. Puoi quindi gestire le icone di navigazione 'MouseOverEvent e MouseOutEvent per impostare il contenuto di, mostrare e nascondere il tuo fumetto.