PrimeFaces 3余分な空白を含むTabView

Question

私はいくつかのタブを持ち、1つは検索タブです。検索ボタンを押すと、検索結果とともに新しいタブが表示されます。新しいタブが表示されると、いくつかの空白行があり、結果のデータテーブルがあります。

ファイヤーバグの助けを借りて、私は空白が他のタブであると判断しました。

また、別のタブに移動すると結果が表示された後、結果タブに戻ります。空白は表示されません。ダイナミックタグがこれを処理すると考えました。

これは、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 Theming CSSタグがありました。

問題のTabViewへのアップグレード。

jQueryを使用する代わりに、ネイティブPrimeFacesウィジェットとして再実装 UIのタブウィジェット。参考：PrimeFaces Migration Guide

は、だから私がしなければならなかったすべては、CSSのすべてのjQuery UIのタブテーマタブを削除し、すべてが魅力のように働きました。

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