我有一个全局演示者,其中包含页眉页脚和主要内容插槽,当页眉始终位于顶部时,页脚始终位于底部...
我的问题是:如何向我的全球演示者添加滚动条?
我知道有很多这样的问题,但我找不到合适的答案。
我的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>
我试图添加包含RootLayotPanel或其他面板的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>
但我有一个小问题:无论我尝试什么,我的页脚都没有贴在底部。 有人知道解决方案吗?
答案 0 :(得分:2)
布局面板在滚动面板中无法正常工作。但是scoll面板可以在布局面板中使用: 例如,滚动中心部分:
<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>
另一种可能性是使用DockPanel而不是布局面板。
如果滚动条中包含标题:
<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>
然后将其放在RootLayoutPanel
或RootPanel
或在布局面板中使用DockPanel。 例如:我们希望有可滚动的标题和中心部分,但西部面板和底部始终在视图中:
<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>
然后将其放入RootLayoutPanel
。
答案 1 :(得分:0)
暂时忘记所有GWT(UiBinder)语法和所有级联布局。请考虑这个简化的例子:
在这种情况下,没有任何内容可以滚动。因此,使用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>
CSS:
.headerContent {
position: fixed;
top: 0;
left: 0;
height: 5.0em;
width: 100%;
background-color: red;
}
.everythingElse {
margin-top: 5.0em; /* Same as the height of the header */
}
你可以在GWT UiBinder中做同样的事情。只需用简单的FlowPanels替换div(如果你愿意),并应用css(使用addStyleNames
属性引用的UiBinder CSS类)。不需要DockPanel。当“everythingElse”的高度超过窗口高度时,body标签的默认设置会显示滚动条。