Pregunta Posicionamiento personalizado para p: gruñido


estoy usando <p:growl> Componente de PrimeFaces 3.2 para mostrar mensajes de caras. Me gustaría personalizar su posición para que aparezca en el lado izquierdo en lugar del lado derecho.

Intenté lo siguiente:

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

Pero no funcionó. ¿Dónde estaba mal?


5
2018-05-18 10:29


origen


Respuestas:


Su código se ve bien.

Lo copié en mi testcase y funciona: el elemento de gruñido se muestra en la esquina superior izquierda. Para esto solo el left:20px; Es necesario (gracias @BalusC por comentar).

Así que el problema debe estar en otra parte. ¿Tiene definiciones de estilo adicionales para su página que omitió en su ejemplo? Intenta aislar el problema eliminando todas las cosas innecesarias.

Este es mi 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>

4
2018-05-18 11:37



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();
            }

este código ayudará a posicionar dinámicamente y restablecer su posición. También la clase de estilo resolver la pregunta que es

                 .ui-growl { left: 20px}

2
2017-09-10 08:00