PrimeFaces 3 TabView с лишним пробелом

Question

У меня есть несколько вкладок, а один - вкладка поиска. При нажатии кнопки поиска отображается новая вкладка с результатами поиска. Когда отображается новая вкладка, есть несколько пробельных строк, а затем таблица данных результатов.

С помощью firebug я определил, что пробелы, похоже, являются другими вкладками.

Кроме того, после того, как результаты появляются, если я перехожу на другую вкладку, а затем обратно на вкладку результатов, пробелы не отображаются. Думал, что динамический тег позаботится об этом.

Это не происходит на других вкладках моего проекта, когда activeIndex НЕ используется.

<p:tabView id="tabs" activeIndex="#{bean.activeTab}" dynamic="true" cache="false"> 
    <p:tab id="data" title="Data"> 
     <h:form> ... </h:form> 
    </p:tab>  
    <p:tab id="search" title="Search"> 
     <h:form> 
     ... 
     <p:commandButton value="Search" action="#{bean.doWork}" update="tabs,growlForm:growlMesg"> 
      <f:setPropertyActionListener target="#{bean.activeTab}" value="2" /> 
      </p:commandButton>   
     </h:form> 
    </p:tab> 
    <p:tab id="results" title="Results" rendered="bean.showResults"> 
     <h:form> ... </h:form> 
    </p:tab> 
</p:tabView> 

Любые мысли были бы полезны.

Cheers,

Answer 1

Это была проблема с CSS. Проект был просто обновлен с PrimeFaces 2.2.1 до 3.0.1.

Были теги CSS JQuery UI Theming для TabView, которые изменяли поведение из-за повторной реализации виджета в новой версии.

Обновление до TabView в вопросе.

Реализован как собственный виджет PrimeFaces вместо использования jQuery Виджеты вкладки пользовательского интерфейса. Справка: PrimeFaces Migration Guide

Так все, что я должен был сделать, это удалить все тематизации вкладки JQuery UI вкладки в CSS и все работало как шарм.

Answer 2

Да, это проблема с CSS, но вы можете исправить это с помощью простого встроенного блока.

/* Fix p:tabView v3.0.1 */ 
div.ui-tabs ul.ui-helper-clearfix { 
    display: inline-block; 
} 

Некоторые другие предложения для вас:

/* Anothers cool css for p:tabview */ 
div.ui-tabs div.ui-tabs-panel { 
    padding: 8px 4px 2px; 
} 

div.ui-tabs ul.ui-tabs-nav { 
    background: none; 
} 

div.ui-tabs ul.ui-tabs-nav li { 
    border-bottom: 1px solid #A8A8A8 !important; 
    background-color: #74ffcc; 
} 

div.ui-tabs ul.ui-tabs-nav li.ui-tabs-selected { 
    padding-bottom: 0; 
    border-bottom: 1px solid #A8A8A8 !important; 
    background-color: #54dfac; 
    box-shadow: 4px 4px 4px #CCCCCC; 
} 

div.ui-tabs ul.ui-tabs-nav li.ui-tabs-selected.ui-state-hover { 
    background-color: #54dfac !important; 
} 

div.ui-tabs ul.ui-tabs-nav li.ui-state-hover { 
    background-color: #64efbc !important; 
}