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"的{{1}}属性。这将简化css选择器。但建议不要使用它，请参阅UIForm with prependId="false" breaks <f:ajax render>

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

1 个答案: