gpt4 book ai didi

css - p :growl 的自定义定位

转载 作者:技术小花猫 更新时间:2023-10-29 11:33:51 25 4
gpt4 key购买 nike

我正在使用 <p:growl> PrimeFaces 3.2 的组件,用于显示面孔消息。我想自定义它的位置,使其出现在左侧而不是右侧。

我尝试了以下方法:

<h:head>
<title>Facelet Title</title>
<style type="text/css">
.ui-growl {
position:absolute;
top:20px;
left:20px;
width:301px;
z-index:9999;
}
</style>
</h:head>
<h:body>
<h:form id="frm">
<div id="add">
<p:growl id="growl" showDetail="true" sticky="true" autoUpdate="true"/>
<h:panelGrid columns="2" >
...

但是没有用。我哪里错了?

最佳答案

您的代码看起来不错。

我将它复制到我的测试用例中并且它有效: growl 元素显示在左上角。为此,只有 left:20px; 是必需的(感谢@BalusC 的评论)。

所以问题一定出在别的地方。您的页面是否有您在示例中省略的其他样式定义?尝试通过删除所有不必要的内容来隔离问题。

这是我的测试用例:

<!DOCTYPE html>
<html 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">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.ui-growl{
left:20px;
}
</style>
</h:head>

<h:body>
<h:form id="myform">
<div id="add">
<p:growl showDetail="true" sticky="true" autoUpdate="true"/>
</div>
</h:form>
</h:body>
</html>

关于css - p :growl 的自定义定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10650935/

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