Primefaces针对特定p的定制定位:咆哮

Question

我正在使用PrimeFaces 3.3.1.我可以通过以下方式定制咆哮

.ui-growl {
    position:absolute;
    top:50%;
    left:50%;
    z-index:9999;
}

但它定制了所有的咆哮.我需要自定义一个特定的<p:growl>.我的意思是,我想在中心放置一个咆哮,其余部分放在右上角.怎么做？

谢谢.

Answer 1

从生成的HTML中可以看出,growl组件没有保存您的实际咆哮数据.出现在角落的消息由div元素保存:

<div id="your_growl_id + _container">

所以对于growl的正确的css选择器将是:

div[id="growlForm1:growlCenter_container"] {}

(我假设你的咆哮组件被放置在相同的形式).最后,正如您在帖子中提到的,如果您的页面上有两个咆哮组件:

<h:form id="growlForm1">
    <p:growl id="growlCenter" showDetail="true" sticky="true" />
    <p:growl id="growlRight" showDetail="true" sticky="true" />  
</h:form>

只需为居中和非居中的growl容器分配所需的css属性:

div[id="growlForm1:growlRight_container"] {
    position:absolute;
    top:20px;
}
div[id="growlForm1:growlCenter_container"] {
    position:absolute;
    top:20px;
    left:40%;
}

请注意,您可以使用该prependId="false"属性<h:form/>.这将简化css选择器.但建议不要使用它,请参阅UIForm with prependId ="false"break <f:ajax render>