ScrollPanel（height）怪异行为GWT，

Question

我收到了ScrollPanel的怪异行为。 它将高度缩小到30px。 这是我的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面板的高度缩小到filePreview 。 可能是什么问题呢。 当我在firebug中将ScrollPanel的子div的高度更改为100％时，它可以正常显示页面，但是似乎我无法访问ScrollPanel的子div，有什么解决方法？

此外，当尝试在Java类中使ScrollPanel成为UiField时，会抛出一个例外，即it can have only one child ，而实际上it can have only one child一个孩子。

谢谢。 人

Answer 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>

Answer 2

尝试将styleName设置为height:100%; 到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>