GWT TabLayoutPanel 不渲染图形内容
我有一个类似于以下的结构，
<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 之外我可以 查看图表，但如果我如上所示放置，则图表不可见。 任何线索都会有帮助。 提前致谢。
I have a structure similar to following
<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>
I have two tabs on of which shows the graph and another one shows
data. However the content inside a tab is not visible. If I put
<g:FlowPanel ui:field="graphContent"/>
outside of TabLayoutPanel I can
see the graph, but If I put as shown above the graph is not visible.
Any clue would be helpful.
thanks in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
为了让 TabLayoutPanel 正常工作，您需要确保以下几点：
1) 您处于标准模式（使用 ）
2) 您正在使用 GWT 2.0 中的新布局面板之一作为 TabLayoutPanel 的父级。
或者
您明确指定 TabLayoutPanel 的高度（百分比不起作用，您必须使用不同的单位）。
TabLayoutPanel 根据其 *Layout 容器的大小使用绝对定位。它不会自动填充普通父元素（例如“div”）的空间。
因此，希望您可以简单地切换到使用 *LayoutPanel 之一作为父级（例如 DockLayoutPanel）。
如果使用 *LayoutPanel 不是一个选项：因为 TabPanel 不能在标准模式下工作（如果你想跨浏览器兼容，你确实需要使用它）并且 TabLayoutPanel 不能与流体布局配合得很好，我最终制作了自己的 TabPanel 版本并使用它。如果您习惯于制作自己的自定义小部件，并且无法使用 *LayoutPanel 之一，我建议您制作自己的自定义小部件或扩展现有小部件之一。
或者，您可以使用CSS或JavaScript将选项卡的内容区域从position:absolute更改为position:relative，但这对我来说似乎有点麻烦，并且将来可能会崩溃。
In order for TabLayoutPanel to work correctly, you need to ensure the following:
1) You're in standards mode (using <!DOCTYPE html>)
2) You're using one of the new Layout panels from GWT 2.0 for TabLayoutPanel's parent.
OR
You specify the height for TabLayoutPanel explicitly (and percentages won't work, you'll have to use a different unit).
TabLayoutPanel uses absolute positioning based on the size of its *Layout container. It will not auto-fill space for normal parent elements (such as "div").
So, hopefully, you can simply switch to using one of the *LayoutPanels as a parent (such as DockLayoutPanel).
If using a *LayoutPanel isn't an option: Since TabPanel doesn't work in standards mode (which you really need to be using if you want to be cross-browser compatible) and TabLayoutPanel doesn't work well with fluid layouts, I've ended up making my own version of a TabPanel and using that instead. If you're comfortable with making your own custom widgets and you can't use one of the *LayoutPanels, I'd recommend making your own or extending one of the existing widgets.
Alternatively, you can use CSS or JavaScript to change the tab's content area from position: absolute to position: relative, but that seems like a bit of a hack to me and may break in the future.
我不知道它是否有帮助，但也许尝试使用
我在使用 TabLayoutPanel 时也遇到了问题，但是当我切换回 TabPanel 时这些问题就消失了。 TabLayoutPanel 有一些尺寸问题，例如不能放在 div 中，它必须“拥有”整个窗口，所以它与 TabPanel 完全不同。
I don't know if it helps, but maybe try using
<g:TabPanel>instead of<g:TabLayoutPanel>. I know it is deprecated.I also had problems with TabLayoutPanel, but they are gone when I switched back to TabPanel. TabLayoutPanel has some sizes issues, e.g. cannot be put in a div, it has to "own" whole window, so it's quite different thing that TabPanel.