Question

我是Primefaces的新手，所以我希望这不是很明显。

简而言之，我创建了一个简单的整页布局，其中包含一个北边栏和一个中心部分。当我在北方LayoutUnit中放置一个工具栏时，我得到一个滚动条（在Chrome上，而不是Firefox），我在工具栏后面添加了额外的填充。

知道如何阻止这两个问题的发生？

编辑：请参阅下面的更新...

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head title="Primefaces Test" />

<h:body>
    <p:layout fullPage="true">
        <p:layoutUnit position="north">
            <h:form>
                <p:toolbar>
                    <f:facet name="right">
                        <p:commandButton value="button" />
                    </f:facet>
                </p:toolbar>
            </h:form>
        </p:layoutUnit>
        <p:layoutUnit position="center">
            <h:outputText value="Hello, world." />
        </p:layoutUnit>
    </p:layout>
</h:body>
</html>

...

编辑1：将工具栏移出北条移除滚动条，删除表单标签可消除间隙。麻烦的是，我不能像这样使用全屏布局，所以它不是解决方案。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head title="Primefaces Test" />

<h:body>
    <p:toolbar>
        <f:facet name="left">
            <p:commandButton type="push" value="button" />
        </f:facet>
        <f:facet name="right">
            <p:commandButton type="push" value="button" />
        </f:facet>
    </p:toolbar>
    <p:layout fullPage="false">
        <p:layoutUnit position="center">
            <h:outputText value="Hello, world." />
        </p:layoutUnit>
    </p:layout>
</h:body>
</html>

在northbar之外，但是使用表单标签仍然有差距：

没有间隙或northbar看起来更好，但无法使用全屏：

Answer 1

好的，所以我通过覆盖布局ui（.ui-layout-unit .ui-layout-unit-content）的溢出css来修复它。希望这有助于某人。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head title="Primefaces Test">
    <style>
        .ui-layout-unit .ui-layout-unit-content {
            padding: 0.2em 0em;
            border: 0px none;
            overflow: hidden !important;
        }
    </style>
</h:head>

<h:body>
    <h:form>
        <p:layout fullPage="true">
            <p:layoutUnit position="north">
                <p:toolbar>
                    <f:facet name="left">
                        <p:commandButton type="push" value="button" />
                    </f:facet>
                    <f:facet name="right">
                        <p:commandButton type="push" value="button" />
                    </f:facet>
                </p:toolbar>
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <h:outputText value="Hello, world." />
            </p:layoutUnit>
        </p:layout>
    </h:form>
</h:body>
</html>

Answer 2

要仅删除北部窗格和北部窗格中的滚动条，我必须将overflow css属性设置为隐藏为北窗格的内容元素。上面建议的解决方案将删除所有窗格中的所有滚动条。通常情况下，人们不希望这样做内容窗格。

Answer 3

我必须使用以下内容才能获得wieland.gmeiner描述的结果（mainLU是我想要保留滚动的布局单元的id。

    .ui-layout-unit:not(#mainLU) .ui-layout-unit-content {
        overflow: hidden;
    }

Primefaces LayoutUnit填充和滚动行为

3 个答案: