Vị trí tùy chỉnh của Prime cho một p cụ thể: growl

Question

Tôi đang sử dụng PrimeFaces 3.3.1. Tôi có thể tùy chỉnh hình ảnh gầm gừ bằng cách:

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

Nhưng nó tùy chỉnh tất cả các lần phát triển. Tôi cần phải tùy chỉnh chỉ một <p:growl> cụ thể. Ý tôi là, tôi muốn đặt một gầm gừ đến trung tâm và tất cả những thứ còn lại ở góc trên cùng bên phải. Làm thế nào để làm điều đó?

Cảm ơn.

Answer 1

Như bạn thấy từ HTML được tạo, thành phần growl không giữ dữ liệu thực tế của bạn. Thông điệp được xuất hiện trong góc là giữ bởi một phần tử div:

<div id="your_growl_id + _container"> 

nên css selector chính xác cho tiếng gầm vang lên sẽ là:

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

(tôi giả sử các thành phần tiếng gầm gừ của bạn được đặt vào cùng hình thức). Cuối cùng như bạn đã nêu trong bài viết của bạn nếu bạn có hai thành phần tiếng gầm vang lên trên trang của bạn:

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

chỉ gán các thuộc tính css mong muốn cho các container tiếng gầm vang lên làm trung tâm và không làm trung tâm:

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

Lưu ý rằng bạn có thể sử dụng thuộc tính prependId="false" của số <h:form/>. Điều đó sẽ đơn giản hóa các bộ chọn css. Nhưng không nên sử dụng điều này, hãy xem UIForm with prependId="false" breaks <f:ajax render>