Primefaces benutzerdefinierte Positionierung für eine bestimmte p: Growl

Question

Ich benutze PrimeFaces 3.3.1. Ich kann Growls anpassen von:

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

Aber es passt alle Growls an. Ich muss nur eine bestimmte <p:growl> anpassen. Ich meine, ich möchte nur ein Knurren in die Mitte und den Rest in die obere rechte Ecke legen. Wie geht das?

Danke.

Answer 1

Wie Sie aus dem generierten HTML sehen die growl Komponente ist nicht Ihre tatsächlichen Knurren Daten zu halten. Die Meldung, die in der Ecke erscheint, ist Halt durch ein div-Element:

<div id="your_growl_id + _container"> 

so die korrekte CSS-Selektor für knurren würde:

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

(ich nehme an, Ihre Knurren Komponenten platziert sind in den gleichen bilden). Schließlich, wie Sie in Ihrem Beitrag bemerkt, wenn Sie zwei Knurren Komponenten auf Ihrer Seite haben:

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

nur die gewünschten CSS-Eigenschaften für den zentriert zuweisen und Knurren Container-nicht zentriert:

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

Beachten Sie, dass Sie können das prependId="false" Attribut der <h:form/> verwenden. Das würde die css-Selektoren vereinfachen. Aber es wird empfohlen, dies nicht zu verwenden, finden Sie UIForm with prependId="false" breaks <f:ajax render>