GWT嵌套TabLayoutPanel显示中的虚假块是什么？

Question

在GWTP应用程序中，我有一个嵌套在另一个TabLayoutPanel中的TabLayoutPanel。我正在为每个Presenter / View使用UiBinder。

我没有在这里包含UiBinder系列（道歉）但是我很难理解为什么嵌套TabLayoutPanel会在两个标签行之间添加一个额外的橙色薄的未标记颜色块（见下图）。具有VerticalPanel而不是嵌套TabLayoutPanel的顶级选项卡缺少额外的未标记橙色块。

你以前遇到过这个显示器吗？

我的MainView.ui.xml如下所示：

<g:TabLayoutPanel barHeight="2" barUnit="EM">
<g:tab>
    <g:header>Invite</g:header>
    <g:VerticalPanel/>
</g:tab>

<g:tab>
    <g:header>News</g:header>
    <g:VerticalPanel/>
</g:tab>

<g:tab>
    <g:header>Teams</g:header>
    <g:TabLayoutPanel barHeight="2" barUnit="EM"/>
</g:tab>

</g:TabLayoutPanel>

对于第三个标签，在＆lt; g：header＆gt;之后嵌套另一个TabLayoutPanel是否正确？

我的嵌套TabLayoutPanel直接用这种格式的每个标签定义：

<g:tab>
    <g:header>All Teams</g:header>
    <g:VerticalPanel/>
</g:tab>

Google Developer Tools显示，在此顶级TabLayoutPanel和嵌套的TabLayoutPanel之间插入了另一个类=“gwt-TabLayoutPabelTab get-TabLayoutPanelTab-selected”的DIV。这个额外的标签嵌套在DIV中，类为“gwt-TabLayoutPanelTabs”。

这些额外的DIV在两行标签之间显示一个额外的块。

Answer 1

当使用VerticalPanel并且所需的嵌套TabLayoutPanel放置在该垂直面板中时，将避免使用虚假块。

在MainView.ui.xml中而不是：

<g:tab>
    <g:header>Teams</g:header>
    <g:TabLayoutPanel barHeight="2" barUnit="EM"/>
</g:tab>

使用它：

<g:tab>
    <g:header>Teams</g:header>
    <g:VerticalPanel/>
</g:tab>

然后在团队的UiBinder文件中：

<g:VerticalPanel>
   <g:TabLayoutPanel ...>
       <g:tab>
           ...

通过添加“额外”VerticalPanel，可以防止GWT添加额外的“ghost”TabLayoutPanel。