ScrollPanel ( height ) 怪异行为 GWT,
Posted
技术标签:
【中文标题】ScrollPanel ( height ) 怪异行为 GWT,【英文标题】:ScrollPanel ( height ) weird behaviour GWT, 【发布时间】:2011-06-22 21:24:29 【问题描述】:我得到了 ScrollPanel 的奇怪行为。它将高度缩小到 30 像素。 这是我的 ui.xml
<g:ScrollPanel styleName="style.fileViewerWorkspaceBg">
<g:FlowPanel>
<g:FlowPanel>
<g:FlowPanel>
<my:OneClickFileUploader ui:field="uploader" enableMultipleFileUpload="true" />
</g:FlowPanel>
<g:FlowPanel ui:field="fileTablePanel">
<cell:SimplePager ui:field="pager"/>
<cell:CellTable ui:field="fileViewTable"/>
</g:FlowPanel>
<g:Label ui:field="processingField" />
</g:FlowPanel>
<g:FlowPanel ui:field="filePreview"/>
</g:FlowPanel>
</g:ScrollPanel>
我在filePreview
和fileTablePanel
+ uploader
之间切换,当我显示uploader+fileTablePanel
时,它会显示滚动条,但是当我切换到filePreview
时,它会缩小filePreview
面板的高度到〜30像素。可能是什么问题呢。当我在firebug
中将ScrollPanel
的子div
的高度更改为100% 时,页面显示正常,但似乎无法访问ScrollPanel 的子div,有什么解决方法吗?
此外,当尝试在 java 类中将 ScrollPanel
设为 UiField 时,它会引发 it can have only one child
的异常,实际上它只有一个孩子。
谢谢。 人
【问题讨论】:
【参考方案1】:我知道这个问题被问到已经有一段时间了,但这是我在遇到同样问题时使用的解决方案:
getContainerElement().getStyle().setHeight(100, Unit.PCT);
这是因为滚动面板是一个简单的面板。
public ScrollPanel()
this.scrollableElem = getElement();
this.containerElem = Document.get().createDivElement();
scrollableElem.appendChild(containerElem);
initialize();
当通过代码或 uibinder 设置/添加小部件时,它将使用 this.containerElem
来保存其子级
这是生成的 html。我为它们命名是为了更清楚:
<div id="ScrollPanel" >
<div id="containerElem" style="position: relative; zoom: 1; height: 100%;">
<canvas id="myAddedWidget" />
</div>
</div>
【讨论】:
【参考方案2】:尝试将带有height:100%;
的 styleName 设置为 FlowPanel(生成的 HTML 中的 div)。
还有您的代码“缺少结束标记 g:FlowPanel”。</g:ScrollPanel>
之前的标签可能有错字,应该是 </g:FlowPanel>
而不是 <g:FlowPanel />
。
<ui:style>
.container
background: #DDD;
height:1500px;
width:100%;
.fileViewerWorkspaceBg
height:100%;
.zero
background-color: yellow;
height:300px;
.first
background-color: blue;
height:50px;
.fileTablePanel
background-color: red;
height:150px;
</ui:style>
<g:ScrollPanel styleName="style.fileViewerWorkspaceBg">
<g:FlowPanel styleName="style.container">
<g:FlowPanel styleName="style.zero">
<g:FlowPanel styleName="style.first">
<g:Label>OneClickFileUploaderPanel</g:Label>
<my:OneClickFileUploader ui:field="uploader"
enableMultipleFileUpload="true" />
</g:FlowPanel>
<g:FlowPanel styleName="style.fileTablePanel">
<g:Label>fileTablePanel</g:Label>
<cell:SimplePager ui:field="pager" />
<cell:CellTable ui:field="fileViewTable" />
</g:FlowPanel>
<g:Label>Label</g:Label>
</g:FlowPanel>
</g:FlowPanel>
</g:ScrollPanel>
【讨论】:
是的,结束标签 g:FlowPanel 是一个错字。但是将高度设置为 100% 是行不通的。 :(有什么想法吗? 似乎无法访问 ScrollPanel 的直接子 div以上是关于ScrollPanel ( height ) 怪异行为 GWT,的主要内容,如果未能解决你的问题,请参考以下文章
DisclosurePanel + 虚拟键盘时 ScrollPanel 不同步