GWT所有窗口上的滚动条_Gwt_Uibinder

GWT所有窗口上的滚动条

gwt

GWT所有窗口上的滚动条,gwt,uibinder,Gwt,Uibinder,我有一个包含页眉页脚和主内容槽的全局演示器，当页眉总是在顶部，页脚总是在底部我的问题是：如何将滚动条添加到我的全球演示者？我知道有很多这样的问题，但我找不到适合我的答案我的UiBinder具有以下代码： <g:RootLayoutPanel width="100%" height="100%"> <g:layer left="0px" right="0px" top="0px" bottom="0px"> <g:DockLayo

我有一个包含页眉页脚和主内容槽的全局演示器，当页眉总是在顶部，页脚总是在底部

我的问题是：如何将滚动条添加到我的全球演示者？

我知道有很多这样的问题，但我找不到适合我的答案

我的UiBinder具有以下代码：

    <g:RootLayoutPanel width="100%" height="100%">
    <g:layer left="0px" right="0px" top="0px" bottom="0px">
        <g:DockLayoutPanel unit="EM">
            <g:north size="5.0">
                <g:HTMLPanel ui:field="headerContentPanel" />
            </g:north>
            <g:center size="1.0">
                <g:FlowPanel ui:field="mainContentPanel" />
            </g:center>
            <g:south size="1.5">
                <g:HTMLPanel ui:field="footerContentPanel" />
            </g:south>
        </g:DockLayoutPanel>
    </g:layer>
</g:RootLayoutPanel>

我已尝试添加包含RootLayoutPanel或其他面板的ScrollPanel。。但比所有的内板接收尺寸为零

我曾尝试在scrollPanel内使用垂直面板，但无法将页脚放在底部

有人有答案吗

==================================================================================

我成功了，这是我的新代码：

    <g:RootLayoutPanel width="100%" height="100%">
    <g:layer>

        <g:ScrollPanel width="100%" height="100%">
            <g:DockPanel width="100%" horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
                <g:Dock direction="NORTH" >
                    <g:HTMLPanel ui:field="headerContentPanel" />
                </g:Dock>
                <g:Dock direction="CENTER" verticalAlignment="ALIGN_MIDDLE" horizontalAlignment="ALIGN_CENTER">
                    <g:FlowPanel ui:field="mainContentPanel" />
                </g:Dock>
                <g:Dock direction="SOUTH"  verticalAlignment="ALIGN_BOTTOM" horizontalAlignment="ALIGN_CENTER">
                    <g:HTMLPanel ui:field="footerContentPanel" />
                </g:Dock>
            </g:DockPanel>
        </g:ScrollPanel>

    </g:layer>
</g:RootLayoutPanel>

但我有一个小问题：不管我怎么做，我的页脚都不贴在底部。。有人知道解决方案吗？

暂时忘记所有GWT（UiBinder）语法和所有级联布局。只需考虑这个简化的例子：

我们有一个窗口，假设当前高度为1000px
我们有一个容器（想象一下一个简单的黑盒子），它占据了100%的窗口高度，所以它的高度是1000px

在这种情况下，没有要滚动的内容。因此，使用scroll=auto时，窗口上将没有滚动条。（忘记我们的黑匣子中任何可能的滚动条。）

如果您想要一个页眉位于顶部，而其他所有内容都滚动的布局（使用占100%高度的滚动条），那么您可能应该从一个标题开始，标题为“position=fixed”。因此，您将在HTML中执行以下操作：

<div class="headerContent">My header</div>
<div class="everythingElse">
   <div class="mainContent">...</div>
   <div class="footerContent">My footer</div>
</div>

在GWT UiBinder中也可以这样做。只需将div替换为简单的flowpanel（如果您愿意），并应用css（使用

addStyleNames

属性引用UiBinder css类）。不需要文档面板。当“everythingElse”的高度超过窗口高度时，body标签的默认设置将显示滚动条。

暂时忘记所有GWT（UiBinder）语法和所有级联布局。只需考虑这个简化的例子：

我们有一个窗口，假设当前高度为1000px
我们有一个容器（想象一下一个简单的黑盒子），它占据了100%的窗口高度，所以它的高度是1000px

在这种情况下，没有要滚动的内容。因此，使用scroll=auto时，窗口上将没有滚动条。（忘记我们的黑匣子中任何可能的滚动条。）

<div class="headerContent">My header</div>
<div class="everythingElse">
   <div class="mainContent">...</div>
   <div class="footerContent">My footer</div>
</div>

在GWT UiBinder中也可以这样做。只需将div替换为简单的flowpanel（如果您愿意），并应用css（使用

addStyleNames

属性引用UiBinder css类）。不需要文档面板。当“everythingElse”的高度超过窗口高度时，body标签的默认设置将显示滚动条。

布局面板在滚动面板中无法正常工作。但scoll面板可用于布局面板：例如，要滚动中心零件：

然后将其放入

RootLayoutPanel

布局面板在滚动面板中无法正常工作。但scoll面板可用于布局面板：例如，要滚动中心零件：

然后把它放到

RootLayoutPanel

嗯，我看不出把滚动条放在这里有什么意义，因为内部

DockLayoutPanel

将占据该层的所有宽度/高度。由于您的图层是从四面定位的

0px

，它将占据您浏览器屏幕的100%。您确定要在页眉和页脚周围使用滚动条还是只在中间面板上使用滚动条？是的，我要在页眉和页脚周围使用滚动条。就像在facebook中一样，标题也包含在滚动条barOK中，尝试用

ScrollPanel

包装

DockLayoutPanel

。这应该可以做到，但目前我远离我的开发电脑，没有办法检查…谢谢你的帮助。但是我已经试过了，它不起作用。只有当DockLayoutPanel具有固定宽度和高（如800px）时，它才起作用。我尝试将宽度和高设置为100%，但不幸没有成功。嗯，我不认为在这里放置滚动条有什么意义，因为内部

DockLayoutPanel

将占据该层的所有宽度/高度。由于您的图层是从四面定位的

0px

ScrollPanel

包装

DockLayoutPanel

。这应该可以做到，但目前我远离我的开发电脑，没有办法检查…谢谢你的帮助。但是我已经试过了，它不起作用。只有DockLayoutPanel具有固定宽度和高（如800px）时，它才能工作。我尝试将宽度和高设置为100%，但不幸没有成功。谢谢，非常清楚。。回答得好！正如我说的，我需要用滚动条覆盖我的所有页面。我用你的第二个解决方案成功地做到了，我在上面编辑了我的问题，你可以看到我的代码，但现在我有另一个问题，我的页脚没有贴在底部，你能帮我吗？我不确定。也许试着使用高度。垂直

    <g:DockLayoutPanel unit="EM">
        <g:north size="5.0">
            <g:HTMLPanel ui:field="headerContentPanel" />
        </g:north>
        <g:center size="1.0">

          <g:ScrollPanel>
            <g:FlowPanel ui:field="mainContentPanel" />
          </g:ScrollPanel>

        </g:center>
        <g:south size="1.5">
            <g:HTMLPanel ui:field="footerContentPanel" />
        </g:south>
    </g:DockLayoutPanel>

<g:ScrollPanel>   
   <g:DockPanel>
      <g:Dock direction="NORTH" height="100px">
          <g:HTMLPanel ui:field="headerContentPanel" />
      </g:Dock>
      <g:Dock direction="CENTER">
          <g:FlowPanel ui:field="mainContentPanel" />
      </g:Dock>
      <g:Dock direction="SOUTH" height="100px">
          <g:HTMLPanel ui:field="footerContentPanel" />
      </g:Dock>
  </g:DockPanel> 
</g:ScrollPanel>

<g:DockLayoutPanel width="100%">
  <g:west size="100.0">
     <g:Label>West side </g:Label>
  </g:west>
  <g:center>
     <g:ScrollPanel>   
        <g:DockPanel>
          <g:Dock direction="NORTH" height="100px">
            <g:HTMLPanel ui:field="headerContentPanel" />
          </g:Dock>
          <g:Dock direction="CENTER">
            <g:FlowPanel ui:field="mainContentPanel" />
          </g:Dock>
        </g:DockPanel> 
     </g:ScrollPanel>
  </g:center>
  <g:south size="50">
     <g:HTMLPanel ui:field="footerContentPanel" />
  </g:south >
</g:DockLayoutPanel>