ScrollPanel ( height ) weird behaviour GWT,
I am getting weird behavior of ScrollPanel. It shrinks the height to some how 30px. Here is my 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>
I am toggling between filePreview
& fileTablePanel
+ uploader
, When I display uploader+fileTablePanel
, it shows me the scroll bars but when i toggle to filePreview
, it shrinks the height of filePreview
panel to ~30px. What could be the problem. When I change the height of child div
of ScrollPanel
to 100% in firebug
, then it displays the page fine, but it seems that I can not access the child div of ScrollPanel, any workaround?
Moreover when t开发者_如何转开发ry make the ScrollPanel
a UiField in java class it throws the exception that it can have only one child
and in actual it has a one child.
thank you. al
I know it's been a while since this question was asked but this is the solution I used when faced with the same problem:
getContainerElement().getStyle().setHeight(100, Unit.PCT);
This is because Scroll panel is a simple panel.
public ScrollPanel() {
this.scrollableElem = getElement();
this.containerElem = Document.get().createDivElement();
scrollableElem.appendChild(containerElem);
initialize();
}
When a widget is set/added, via code or uibinder, it will used this.containerElem
to hold its children
This is the resulting html. I named them in hopes to make it clearer:
<div id="ScrollPanel" >
<div id="containerElem" style="position: relative; zoom: 1; height: 100%;">
<canvas id="myAddedWidget" />
</div>
</div>
Try to set styleName with height:100%;
to FlowPanel (div in resulting HTML).
Also your code "missing end tag g:FlowPanel".
Probably typo in tag before </g:ScrollPanel>
, should be </g:FlowPanel>
instead of <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>
精彩评论