Benutzerdefinierte Positionierung für p: knurren

Ich verwende <p:growl> Komponente von PrimeFaces 3.2, um Gesichter Nachrichten anzuzeigen. Ich möchte seine Position so anpassen, dass sie auf der linken Seite statt auf der rechten Seite erscheint.Benutzerdefinierte Positionierung für p: knurren

habe ich versucht, die folgenden:

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

Aber es funktioniert nicht. Wo lag ich falsch?

Quelle

2012-05-18 z22

Im Styling fehlt Ihnen die fehlende Position: Relativ oder Position: Absolut? – Kennet

meine Frage bearbeitet ... immer noch das gleiche Problem ... Brummposition ändert sich nicht. wo bin ich falsch? – z22

@Kennet: Unnötig. Das ist bereits im Standard-Stil von 'p: growl'. – BalusC

Ihr Code sieht gut aus.

Ich habe es in meinem Testfall kopiert und es funktioniert: das Knurren-Element wird in der oberen linken Ecke angezeigt. Dafür ist nur die left:20px; notwendig (Danke @BalusC für die Kommentierung).

Also muss das Problem irgendwo anders sein. Haben Sie zusätzliche Stildefinitionen für Ihre Seite, die Sie in Ihrem Beispiel weggelassen haben? Versuchen Sie, das Problem zu isolieren, indem Sie alle unnötigen Dinge entfernen.

Das ist mein Testfall:

<!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>

Quelle

2012-05-18 11:37:43

zu Ihrem Index JSF Andernfalls werden die Demos kopiert werden malfuntion die 'left' Eigenschaft hat ausreichend. Andere sind identisch mit dem Standardstil ".ui-growl". – BalusC

@BalusC. Danke fürs Kommentieren. Meine Antwort wurde aktualisiert. –

@Matt Handy: Danke, ja, ich habe zusätzliche Stile definiert, und wenn ich die zusätzlichen CSS entferne, funktioniert die Growl-Positionierung gut. aber die zusätzlichen css-dateien sind für meine app notwendig, und ich möchte auch, dass das knurren auf individuelle weise funktioniert. was soll ich machen? – 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(); 
      }

dieser Code wird dazu beitragen, dnamically und setzen Sie seine positon positiongrowl. auch die Stilklasse löst die Frage

    .ui-growl { left: 20px}

Quelle

2013-09-10 08:00:39

Das'! wichtig' ist hier ein Hack. Sie sollten es entfernen und sicherstellen, dass Ihre PrimeFaces o. Verride CSS-Datei wird auf die richtige Weise geladen. Siehe auch http://StackOverflow.com/a/8774997/ – BalusC

danke guten Punkt –

Benutzerdefinierte Positionierung für p: knurren

Antwort

Verwandte Themen