Primefaces特定のpのカスタム配置：growl

Question

私はPrimeFaces 3.3.1を使用しています。

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

しかし、それはすべてのうなりをカスタマイズします。私はただ一つの具体的なものをカスタマイズする必要があります<p:growl>。私は、中央に1つのうなり音を置き、残りのすべてを右上隅に配置したいと考えています。どうやってするか？

ありがとうございました。

Answer 1

生成されたHTMLからわかるように、growlコンポーネントは実際のgrowlデータを保持していません。

<div id="your_growl_id + _container"> 

ようにうなりの正しいCSSセレクタは次のようになります：

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

（私はあなたのうなり声の成分が同じに配置されていると仮定隅に表示されているメッセージは、div要素によって保持され形）。あなたがあなたの記事で述べたように、あなたのページの上の2つのうなり声のコンポーネントがある場合は最後に：こと

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

注：

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

をちょうど中心と中心のないうなり声のコンテナのために所望のCSSプロパティを割り当てます<h:form/>のprependId="false"属性を使用できます。それはcssセレクタを単純化するでしょう。しかし、これを使わないことをお勧めします。UIForm with prependId="false" breaks <f:ajax render>