Пользовательское позиционирование Primefaces для определенного p:growl

Я использую PrimeFaces 3.3.1. Я могу настроить growls по:

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

но он настраивает все рычание. Мне нужно настроить только один конкретный <p:growl>. Я имею в виду, я хочу поместить только одно рычание в центр, а все остальное в верхний правый угол. Как это сделать?

спасибо.

9
css growl primefaces

1 ответов

как вы можете видеть из сгенерированного HTML growl компонент не держит ваши фактические данные growl. Сообщение, которое появляется в углу, удерживается элементом div:

<div id="your_growl_id + _container">

таким образом, правильный селектор css для growl будет:

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

(Я предполагаю, что ваши компоненты growl помещены в ту же форму). Наконец, как вы отметили в своем посте, если у вас есть два компонента рычать на странице:

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

просто назначьте нужные свойства css для центрированные и нецентрированные контейнеры growl:

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. но рекомендуется не использовать это, см. UIForm с prependId=" false " breaks

10