gpt4 book ai didi

css - Primefaces LayoutUnit 填充和滚动行为

转载 作者:太空宇宙 更新时间:2023-11-03 20:42:34 25 4
gpt4 key购买 nike

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

http://i.imgur.com/SRKGMp4.jpg

...

编辑 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 之外,但使用 form 标签仍然有差距:

http://i.imgur.com/aadprsV.jpg

没有间隙或 northbar 看起来更好,但不能使用全屏:

http://i.imgur.com/qlwkhPN.jpg

最佳答案

好的,所以我通过覆盖布局 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>

http://i.imgur.com/EvrXAn0.jpg

关于css - Primefaces LayoutUnit 填充和滚动行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24609347/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com