css – 覆盖gwt DockLayoutPanel小部件的溢出

前端之家收集整理的这篇文章主要介绍了css – 覆盖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; ">

我的问题是溢出:隐藏.

如何告诉DockLayoutPanel西方元素溢出中心元素是否可以?

编辑:
我找到了一个非常可靠的解决方法

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

有没有人知道一个不弄乱HTML元素的解决方案?

解决方法

您可以覆盖north 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

原文链接:https://www.f2er.com/css/215094.html

猜你在找的CSS相关文章