css gwt overflow uibinder docklayoutpanel

css - Anular el desbordamiento de los widgets de DockLayoutPanel de gwt



overflow uibinder (2)

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 se ve más o menos así:

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

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

El elemento g: west se representa como

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

Mi problema es ese overflow: hidden .

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

Editar: encontré una solución que es bastante confiable

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

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


Una alternativa sería utilizar 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.


Puede anular el estilo en línea del div del 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.

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