针对特定p:growl的Primefaces自定义定位 [英] Primefaces custom positioning for a specific p:growl

问题描述

我正在使用PrimeFaces 3.3.1.我可以通过以下方式自定义咆哮声:

I am using PrimeFaces 3.3.1. I can customize growls by:

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

但是它会自定义所有咆哮声.我只需要自定义一个特定的<p:growl>.我的意思是，我只想将一个咆哮声放在中间，将其余所有咆哮声放在右上角.该怎么做?

But it customizes all growls. I need to customize just one specific <p:growl>. I mean, I want to place just one growl to the center and all the rest to the top right corner. How to do that?

谢谢.

推荐答案

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

As you can see from the generated HTML the growl component isn't holding your actual growl data. The message which is appearing in the corner is hold by a div element:

<div id="your_growl_id + _container">

因此，正确的咆哮css选择器将是:

so the correct css selector for growl would be:

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

(我假设您的咆哮声成分以相同的形式放置).最后，如您在帖子中所指出的，如果页面上有两个咆哮声组件:

(I assume your growl components are placed into the same form). Finally as you noted in your post if you have two growl components on your page:

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

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

just assign the desired css properties for the centered and not-centered growl containers:

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

请注意，您可以使用<h:form/>的prependId="false"属性.这样可以简化CSS选择器.但建议不要使用它，请参阅

Note that you can use the prependId="false" attribute of the <h:form/>. That would simplify the css selectors. But it is advised not to use this, see UIForm with prependId="false" breaks <f:ajax render>

这篇关于针对特定p:growl的Primefaces自定义定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！