PrimeFaces 3帶有額外空白的TabView

我有許多選項卡，其中一個是搜索選項卡。當按下搜索按鈕時，將顯示一個新標籤，並顯示搜索結果。當顯示新選項卡時，會出現一些空白行，然後是結果數據表。PrimeFaces 3帶有額外空白的TabView

使用Firebug的幫助下，我已經確定的空白似乎是其他選項卡。

此外，結果拿出如果我去一個不同的標籤，然後返回結果選項卡中的空格不呈現後。認爲動態標籤會照顧到這一點。

當不使用activeIndex這並不在我的項目的其他選項卡出現。

enter image description here

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

任何想法，將是有益的。

乾杯，

來源

2012-01-23 Berek Bryan

這是一個CSS問題。該項目剛從PrimeFaces 2.2.1升級到3.0.1。

有jQuery UI的主題化CSS標籤爲TabView的這是改變由於重新執行部件的新版本的行爲。

升級到有問題的TabView的。

重新實現爲一個本地PrimeFaces小部件使用jQuery UI 的標籤窗口小部件，而不是。參考：PrimeFaces Migration Guide

所以我所要做的就是刪除CSS中的所有jQuery UI Tabs主題標籤，並且所有工作都像魅力一樣。

來源

2012-02-01 15:04:46

是的，是一個CSS的問題，但你可以用一個簡單的inline-block的解決這個問題。

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

來源

2012-02-07 12:34:05

PrimeFaces 3帶有額外空白的TabView

回答

相關問題