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

回答

相关问题