css - Primefaces 为特定 p:growl 自定义定位

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">

所以咆哮的正确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>

只需为居中和非居中的咆哮容器分配所需的 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>