Override overflow for gwt DockLayoutPanel widgets

Question

Estoy creando una página con un menú de navegación a la izquierda, que contiene iconos para cada sección. El diseño de la página es como la siguiente:

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

Al pasar sobre cada uno de los iconos de la barra de navegación se supone que muestra un globo que contiene el título del tema, y ​​algunos subtemas. Logré el efecto por CSS, dando a cada globo una posición relativa a su icono.

El G: al oeste elemento se representa como

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

Mi problema es que overflow: hidden.

¿Cómo le digo al DockLayoutPanel que está bien que el elemento oeste se desborde sobre el elemento central?

Editar: He encontrado una solución que es bastante fiable

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

¿Alguien sabe una solución que no se anda con elementos HTML?

Answer 1

Puede anular estilo inline de la div norte:

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

probado con GWT 2.6.1.

Se puede encontrar más sugerencias aquí: https://github.com/gwtbootstrap/gwt-bootstrap/issues/231

Answer 2

Una alternativa sería usar el PopupPanel que muestra un widget de globo personalizado, con el estilo correspondiente. A continuación, puede manejar sus iconos de navegación 'MouseOverEvent y MouseOutEvent para configurar el contenido de, mostrar y ocultar su globo.