p:growl的自定义定位
p:growl的自定义定位
提问于 2012-05-18 18:29:23
我正在使用PrimeFaces 3.2的<p:growl>组件来显示faces消息。我想自定义它的位置，使其显示在左侧而不是右侧。
我尝试了以下几种方法：
<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" >
...但它并没有起作用。我哪里错了？
回答 2
Stack Overflow用户
发布于 2012-05-18 19:37:43
您的代码看起来很好。
我将它复制到我的测试用例中，它可以工作:在左上角显示了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>Stack Overflow用户
发布于 2013-09-10 16:00:39
function growlLeft(){
var css = document.createElement("style");
css.id="growlStyle";
css.type = "text/css";
css.innerHTML = ".ui-growl { left: 20px!important}";
document.body.appendChild(css);
}
function growlReset(){
$('#growlStyle').empty();
}这段代码将帮助动态定位和重置它的位置。此外，style类还解决了以下问题
.ui-growl { left: 20px}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10650935
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号