Niestandardowe pozycjonowanie dla p: growl

Używam komponentu PrimeFaces 3.2, aby wyświetlać wiadomości o ścianach. Chciałbym dostosować jego pozycję tak, aby pojawiała się po lewej stronie zamiast prawej.Niestandardowe pozycjonowanie dla p: growl

Próbowałem następujące:

<h:head> 
    <title>Facelet Title</title> 
    <style type="text/css"> 
     .ui-growl { 
      position:absolute; 
      top:20px; 
      left:20px; 
      width:301px; 
      z-index:9999; 
     } 
    </style> 
</h:head> 
<h:body> 
    <h:form id="frm"> 
     <div id="add"> 
      <p:growl id="growl" showDetail="true" sticky="true" autoUpdate="true"/> 
      <h:panelGrid columns="2" > 
      ...

Ale to nie działa. Gdzie się myliłem?

Źródło

2012-05-18 z22

W stylizacji nie ma brakującej pozycji: względna lub pozycja: absolutna? – Kennet

zredagowałem moje pytanie ... wciąż ten sam problem ... warczenie nie zmienia się. gdzie się mylę? – z22

@Kennet: Niepotrzebne. To już jest w domyślnym stylu 'p: growl '. – BalusC

Twój kod wygląda dobrze.

Skopiowałem to w moją skorupę i działa: element rażenia pokazuje w lewym górnym rogu. Do tego potrzebny jest tylko left:20px; (dzięki @BalusC za komentowanie).

Problem musi być gdzie indziej. Czy masz dodatkowe definicje stylu dla swojej strony, które pominąłeś w twoim przykładzie? Spróbuj wyizolować problem, usuwając wszystkie niepotrzebne rzeczy.

To mój testcase:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:p="http://primefaces.org/ui"> 
    <h:head> 
     <title>Facelet Title</title> 
     <style type="text/css"> 
      .ui-growl{ 
       left:20px; 
      } 
     </style> 
    </h:head> 

    <h:body> 
     <h:form id="myform"> 
      <div id="add"> 
       <p:growl showDetail="true" sticky="true" autoUpdate="true"/> 
      </div> 
     </h:form> 
    </h:body> 
</html>

Źródło

2012-05-18 11:37:43

Właściwie, tylko właściwość 'left' była wystarczająca. Inne są identyczne jak domyślny styl ".ui-grow". – BalusC

@BalusC. Dzięki za komentowanie. Zaktualizowałem moją odpowiedź. –

@Matt Handy: thanks, yes Mam zdefiniowane dodatkowe style, a po usunięciu dodatkowego css pozycjonowanie warczenia działa dobrze. ale dodatkowe pliki css są niezbędne dla mojej aplikacji, a także chcę, aby ryk działał w niestandardowy sposób. co powinienem zrobić? – z22

function growlLeft(){ 

       var css = document.createElement("style"); 
       css.id="growlStyle"; 
       css.type = "text/css"; 
       css.innerHTML = ".ui-growl { left: 20px!important}"; 
       document.body.appendChild(css); 
      } 
      function growlReset(){ 
       $('#growlStyle').empty(); 
      }

ten kod pomoże positiongrowl dnamically i zresetować swój Positon. również klasa stylu rozwiązuje pytanie:

    .ui-growl { left: 20px}

Źródło

2013-09-10 08:00:39

'! important' jest tutaj hackerem, powinieneś go usunąć i upewnić się, że twoje PrimeFaces verride Plik CSS jest ładowany we właściwy sposób. Zobacz także http://stackoverflow.com/a/8774997/ – BalusC

dzięki dobry punkt –

Niestandardowe pozycjonowanie dla p: growl

Odpowiedz

Powiązane problemy