11

PrimeFaces3.3.1を使用しています。私はうなり声をカスタマイズすることができます：

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

しかし、それはすべてのうなり声をカスタマイズします。特定の1つだけをカスタマイズする必要があり<p:growl>ます。つまり、うなり声を1つだけ中央に配置し、残りはすべて右上隅に配置したいと思います。どうやってするか？

ありがとう。

4

1 に答える 1

11

生成されたHTMLからわかるように、growlコンポーネントは実際の唸り声データを保持していません。隅に表示されているメッセージは、div要素によって保持されています。

<div id="your_growl_id + _container">

したがって、growlの正しいcssセレクターは次のようになります。

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

（私はあなたのうなり声のコンポーネントが同じフォームに配置されていると思います）。最後に、あなたがあなたの投稿で述べたように、あなたのページに2つのうなり声のコンポーネントがある場合：

<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セレクターを単純化するでしょう。ただし、これは使用しないことをお勧めします。prependId="false"を使用したUIFormを参照してください<f：ajax render>

于 2012-11-03T16:51:22.197 に答える