Question

我的结构类似于以下

<g:TabLayoutPanel ui:field="rightTabPanel" 
             width="100%" height="100%" 
                     barUnit="EM" barHeight="3"> 
    <g:tab> 
          <g:header>Graph</g:header> 
                    <g:FlowPanel ui:field="graphContent"/> 
     </g:tab> 
      <g:tab> 
           <g:header>Data</g:header> 
                      <g:FlowPanel ui:field="dataContent"/> 
     </g:tab> 
 </g:TabLayoutPanel>

我有两个选项卡，其中显示图表，另一个显示数据。但是，选项卡内的内容不可见。如果我把

<g:FlowPanel ui:field="graphContent"/>

我可以在TabLayoutPanel之外的

看图表，但如果我按上图所示放置图表是不可见的。任何线索都会有所帮助。提前谢谢。

Answer 1

为了使TabLayoutPanel正常工作，您需要确保以下内容：

1）您处于标准模式（使用＆lt;！DOCTYPE html＆gt;）
2）您正在使用GWT 2.0中的一个新布局面板作为TabLayoutPanel的父级 OR
您明确指定TabLayoutPanel的高度（百分比不起作用，您将不得不使用不同的单位）。

TabLayoutPanel根据其* Layout容器的大小使用绝对定位。它不会自动填充正常父元素的空间（例如“div”）。因此，希望您可以简单地切换到使用其中一个* LayoutPanel作为父级（例如DockLayoutPanel）。

如果使用* LayoutPanel不是一个选项：由于TabPanel不能在标准模式下工作（如果你想要跨浏览器兼容，你真的需要使用它）和TabLayoutPanel不适用于流畅的布局，我最终制作了我自己的TabPanel版本并使用它。如果您对制作自己的自定义小部件感到满意，并且无法使用其中一个* LayoutPanel，我建议您自己制作或扩展其中一个现有的小部件。

或者，您可以使用CSS或JavaScript将标签的内容区域从position：absolute更改为position：relative，但这对我来说似乎有点黑客，并且可能在将来中断。

Answer 2

我不知道它是否有帮助，但可能尝试使用<g:TabPanel>代替<g:TabLayoutPanel>。我知道它已被弃用。

我也遇到了TabLayoutPanel的问题，但是当我切换回TabPanel时它们就消失了。 TabLayoutPanel有一些尺寸问题，例如不能放在一个div中，它必须“拥有”整个窗口，所以TabPanel与它完全不同。

GWT TabLayoutPanel不呈现图形内容

2 个答案: