Переопределить переполнение для виджетов gwt DockLayoutPanel

Я создаю страницу с меню навигации слева, содержащим значки для каждого раздела. Макет страницы выглядит примерно так:

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

При наведении указателя мыши на каждый из значков панели навигации должен отображаться всплывающая подсказка с названием элемента и некоторыми подпунктами. Я добился эффекта с помощью CSS, дав каждому шарику положение относительно его значка.

Элемент g:west отображается как

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

Моя проблема в том что overflow: hidden,

Как мне сообщить DockLayoutPanel, что западный элемент в порядке для переполнения центрального элемента?

Изменить: я нашел обходной путь, который довольно надежный

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

Кто-нибудь знает решение, которое не связывается с элементами HTML?

Источник

2 ответа

Решение

Вы можете переопределить встроенный стиль северного div:

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

Протестировано с GWT 2.6.1.

Вы можете найти больше предложений здесь: https://github.com/gwtbootstrap/gwt-bootstrap/issues/231

Источник

Альтернативой может быть использование PopupPanel с отображением настраиваемого виджета с соответствующим стилем. Вы можете обрабатывать значки навигации MouseOverEvent а также MouseOutEvent чтобы настроить содержимое, показать и скрыть свой воздушный шар.

Источник
Другие вопросы по тегам