2016-11-03 1 views
0

Мне нужно положить несколько компонентов p: growl на той же странице в разных позициях Один в левой, один справа и один в центре. Но если я переопределение стиля это пораженный во всех рычишь, как это:Как я могу поместить два перфорима в одну страницу с разными позициями?

<style type="text/css"> 
      .ui-growl{ 
       left:100px; 
      } 
     </style> 

Это означает, что я должен иметь другой стиль UI-рычание. Я создал его, но это не поможет.

.ui-growl1{ 
       right:30px; 
      } 

ответ

1

Вы можете указать, какой элемент учетной записи, чтобы применить стиль:

.ui-growl:nth-child(2) { 
    right:30px; 
} 
+1

или увидеть, если вы можете дать рычание класс и использовать его в селектор. Клиентская сторона - это всего лишь html, css и javascript. – Kukeltje

0

Решение является

<style type="text/css"> 
       div[id="growl-error_container"] { 
        // background-color: red !important; 
        right:30px; 
       } 
       div[id="growl-success_container"] { 
        // background-color: green !important; 
        left: 30px; 
        width: 360px; 
        height: 110px; 

       } 
      </style> 

       <p:growl id="growl-error" class="ui-growl" showDetail="true" sticky="true" /> 

       <p:growl id="growl-success" showDetail="true" sticky="true"/> 
+1

Я лично добавлю конкретный ckass вместо того, чтобы полагаться на PF внутренне свернутые идентификаторы, если возможно – Kukeltje