Posizionamento personalizzato per p: growl

Sto utilizzando il componente <p:growl> di PrimeFaces 3.2 per mostrare i messaggi dei volti. Vorrei personalizzare la sua posizione in modo che appaia sul lato sinistro anziché sul lato destro.Posizionamento personalizzato per p: growl

ho provato la seguente:

<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" > 
      ...

Ma non ha funzionato. Dove stavo sbagliando?

fonte

2012-05-18 z22

Nello stile non ti manca la posizione: relativa o posizione: assoluta? – Kennet

modificato la mia domanda ... ancora lo stesso problema ... la posizione del ringhio non sta cambiando. dove sbaglio? – z22

@Kennet: inutile. Questo è già nello stile predefinito di 'p: growl'. – BalusC

Il tuo codice sembra buono.

L'ho copiato nella mia testcase e funziona: l'elemento ringhio mostra nell'angolo in alto a sinistra. Per questo è necessario solo lo left:20px; (grazie a @BalusC per i commenti).

Quindi il problema deve essere altrove. Hai altre definizioni di stile per la tua pagina che hai omesso nel tuo esempio? Prova ad isolare il problema rimuovendo tutte le cose inutili.

Questo è il mio 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>

fonte

2012-05-18 11:37:43

In realtà, solo la proprietà 'left' è stata sufficiente. Altri sono identici come lo stile predefinito '.ui-growl'. – BalusC

@BalusC. Grazie per il commento. Aggiornato la mia risposta. –

@Matt Handy: grazie, sì ho definito altri stili, e quando rimuovo il css aggiuntivo il posizionamento del growl funziona bene. ma i file css aggiuntivi sono necessari per la mia app, e voglio anche che il ring lo faccia in modo personalizzato. cosa dovrei fare? – 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(); 
      }

questo codice contribuirà a positiongrowl dnamically e ripristinare la sua positon. anche la classe di stile risolve la domanda che è

    .ui-growl { left: 20px}

fonte

2013-09-10 08:00:39

Il'! important' è qui un hack. Dovresti rimuoverlo e assicurarti che i tuoi PrimeFaces o verride Il file CSS viene caricato nel modo giusto. Vedi anche http://stackoverflow.com/a/8774997/ – BalusC

grazie buon punto –

Posizionamento personalizzato per p: growl

risposta

Problemi correlati