标签: 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元素的解决方案？

我用下一个方式描述我的面板

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
         xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:DockLayoutPanel unit="PX" width="600" >
    <g:north size="85">
    ....
    </g:north>
    <g:center>
    ....

    </g:center>
</g:DockLayoutPanel>

为北部和中间下一个div生成GWT.

 <div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 85px;"
 <div style="position: absolute; overflow: hidden; left: 0px; top: 85px; right: 0px; bottom: 0px;">

它们包含我需要的数据,但第二个div没有显示.哪里错了？

UPD: 仅举例来说

    <g:center>
        <g:FlowPanel height="100%">
            <g:Label height="100%">TEST2</g:Label>
        </g:FlowPanel>
    </g:center>

我明白了

<div style="position: absolute; overflow: hidden; left: 0px; top: 85px; right: 0px; bottom: 0px;">
<div style="position: absolute; overflow: hidden; left: 0px; top: 85px; …

我正在使用GWT 2.4,我在为我的应用程序正常工作设置滚动条时遇到问题.当我尝试缩放页面时 - 现在不显示整个页面的滚动条.

目前我的应用程序由DockLayoutPanel组成,并以下列方式显示:

private DockLayoutPanel appContainer = new DockLayoutPanel(Style.Unit.PX);
(...)
appContainer.addNorth(bannerSimplePanel, 104);
appContainer.addWest(menuSimplePanel, 200);
appContainer.add(new ScrollPanel(contentSimplePanel));

RootLayoutPanel.get().add(appContainer);

我希望为整个页面配置滚动条,而不是仅为页面的"主要内容"(contentSimplePanel)配置滚动条.我试图将滚动条添加到最后一步:

RootLayoutPanel.get().add(new ScrollBar(appContainer));

但它不起作用.使用ScrollBar添加整个appContainer时,只有横幅显示在我的页面上,其余为黑色.

谢谢你的帮助.

我创建一个小部件并将其添加到 DockLayoutPanel 中，如下所示：

DockLayoutPanel dockPanel = new DockLayoutPanel(Unit.PCT);  
dockPanel.addNorth(widget, size);

尺寸参数决定什么？

Google 表示使用CSS 参数left、top、width、height、right 和bottom 来确定子项的大小（在基于约束的布局小节中）。

从逻辑上讲，传递值 100（单位为 %）作为大小将使小部件填充其容器，因为它代表单个维度。

我只是想获得一个布局，其中北部小部件的高度为 100px，宽度为 100%，东部和西部的高度为 100%，宽度为 25%，中心占据剩余空间。我用普通的 DockPanel 实现了这一点，但 UI 在窗口大小更改等方面不够强大。

我希望了解 DockLayoutPanel 大小调整的解释或任何有用的指针。提前致谢。

注意：我对使用 UI 绑定器不感兴趣，因为我已经创建了应用程序，此过程是维护工作。