PrimeFaces 3 TabView与额外的空白

Question

我有多个标签，其中一个是搜索标签。按下搜索按钮时，将显示带有搜索结果的新选项卡。显示新选项卡时，会有一些空白行，然后是结果数据表。

在萤火虫的帮助下，我确定空白似乎是其他标签。

此外，在结果出现后，如果我转到另一个选项卡然后返回结果选项卡，则不会呈现空白。认为动态标签可以解决这个问题。

当未使用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>

任何想法都会有所帮助。

干杯，

Answer 1

这是一个CSS问题。该项目刚刚从PrimeFaces 2.2.1升级到3.0.1。

TabView的jQuery UI主题CSS标签正在改变由于在新版本中重新实现小部件而导致的行为。

升级到相关的TabView。

  

重新实现为本机PrimeFaces小部件，而不是使用jQuery   UI的标签小部件。参考：PrimeFaces Migration Guide

所以我所要做的就是删除CSS中的所有jQuery UI Tabs主题标签，一切都像魅力一样。

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;
}