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>