Переопределить переполнение для виджетов 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?


css overflow gwt uibinder docklayoutpanel
person djjeck    schedule 21.05.2012    source источник
comment
Я видел это (ответ внизу): github.com/gwtbootstrap/gwt-bootstrap/ Issues/231 в основном это говорит о том, что нужно установить высоту вашей панели навигации на 100%: ‹g:SimplePanel ui:field=navigation height=100%/› Однако я не пробовал...   -  person AndreasS    schedule 11.12.2013
comment
спасибо @djjeck за ваш обходной путь, сработало для меня :)   -  person XioRcaL    schedule 25.11.2015

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете переопределить встроенный стиль северного 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

person gingo    schedule 29.12.2014

arrow_upward
0
arrow_downward

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

person Boris Brudnoy    schedule 22.05.2012
comment
Это допустимая альтернатива, хотя я чувствую себя безопаснее, полагаясь на относительное позиционирование CSS для размещения моих воздушных шаров рядом с кнопками, а не вычисляя координаты с помощью JS. - person djjeck; 23.05.2012