Primefaces tabView 标题大小与手风琴面板组合不正确

Question

我遇到了一个 p:tabView 显示在 p:accordionPanel 旁边的问题。 tabView 的 header 占据了与整个手风琴面板相同的垂直大小。

最初是在模板客户端中。我已将其简化为以下演示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
    </h:head>

    <h:body>
        <div>
            <div id="left" style="float: left">
                <p:accordionPanel>
                    <p:tab title="Accordion">
                        X<br/> 
                        Y<br/>
                        Z<br/>
                    </p:tab>
                </p:accordionPanel>
            </div>
            <div id="right" style="margin-left: 150px">
                <p:tabView>
                    <p:tab title="tabOne"> one </p:tab>
                </p:tabView>
            </div>
        </div>
    </h:body>
</html>

我正在使用 PrimeFaces 5.0、GlassFish 4.1

Answer 1

为 p:tabview 尝试以下样式属性

<p:tabView style="display: inline-block; width: 100%">
      <p:tab title="tabOne"> one </p:tab>
</p:tabView>