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