Что такое ложный блок на дисплее GWT вложенной TabLayoutPanel?

Question

В приложении GWTP у меня есть вкладка TabLayoutPanel, вложенная в другую TabLayoutPanel. Я использую UiBinder для каждого Presenter/View.

Я не включил строки 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> 

Для этой третьей вкладке, это правильно гнездо другой TabLayoutPanel после < г: заголовок >?

Мой вложенная TabLayoutPanel это прямолинейно определяется с каждой вкладкой этого формата:

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

Google Developer Tools показывает, что еще один DIV с классом = "GWT-TabLayoutPabelTab Get-TabLayoutPanelTab выбранный" вставляется между этим Топ- уровня TabLayoutPanel и вложенной TabLayoutPanel. Эта дополнительная вкладка вложена в DIV с классом «gwt-TabLayoutPanelTabs».

Эти дополнительные DIVs отображают дополнительный блок между двумя строками вкладок.

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

путем добавления " extra "VerticalPanel не позволяет GWT добавлять дополнительный« призрак »TabLayoutPanel.