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> 

我在filePreviewfileTablePanel + 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”。&lt;/g:ScrollPanel&gt; 之前的标签可能有错字,应该是 &lt;/g:FlowPanel&gt; 而不是 &lt;g:FlowPanel /&gt;

<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 不同步

标准盒模型与怪异盒模型

2022-03-09——标准盒模型与怪异盒模型的区别 及 box-sizing的应用

怪异盒模型

设置标准盒子和怪异盒子

标准盒模型和怪异盒模型的差异