Question

此处的目标是创建一个可折叠的面板，该面板也独立于其所在的页面浮动（因此无论页面滚动的位置如何，它始终可见。）

我认为p：布局将是一个很好的起点。

在我的页面中我有

<div id="tools" class="toolbox">
    <p:layout fullPage="false">
        <p:layoutUnit position="center" collapsed="true" style="padding: initial; border: initial; overflow: hidden;"/>
        <p:layoutUnit position="east" header="Toolbox" resizable="false" closable="false" collapsible="true">
            <p:tabView id="toolbox-tab">
                <p:tab id="tab1" title="Notes">
                    <p:inputTextarea rows="15" cols="50" />
                </p:tab>
            </p:tabView>
        </p:layoutUnit>
    </p:layout>
</div>

与工具箱相关的样式是：

.toolbox {
    position: fixed;
    right: 0;
    width: 360px;
    top: 15em;
}

我对此并不满意，因为在没有滚动条的情况下“隐藏”中心面板似乎有点黑客。

这是一个很好的解决方案，还是有人建议更好的方法来做到这一点？

编辑：

更具体一点，我想知道是否有不同的方法来复制p：layout面板的布局格式以及Primefaces使用的可折叠小部件按钮？

Answer 1

我想我需要更多解释，但是，这可能类似吗？

<html lang="en">
<head>
    <meta charset="utf-8">
        <style type="text/css">
            .container {
                position: relative;
            }
            .tab {
                position: absolute;
                top: 15em;
                right: 0;
                width: 360px;
                background-color: red;
            }
        </style>
</head>
<body>
    <div class="container">
        <p class="tab">
            CONTENT
        </p>
    </div>
</body>

然后你应该决定如何处理滚动条问题：

Use full width excluding overflow scrollbar with "position: absolute"

或者如果你想限制＆lt;的高度。 p> ，让它可滚动......

希望它有所帮助！

使用primefaces p：layout创建浮动的可折叠面板

1 个答案: