Custom positioning for p:growl

Question

Custom positioning for p:growl

11.2k views Asked by z22 At 13 September 2024 at 08:28

I am using <p:growl> component of PrimeFaces 3.2 to show faces messages. I would like to customize its position so that it appears on the left side instead of the right side.

I tried the following:

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

But it did not work. Where was I wrong?

Original Q&A

There are 2 answers

**Halis Yılboğa** · Answer 1 · 2013-09-10 08:00:39

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

this code will help to positiongrowl dnamically and reset its positon. also the style class resolve the question which is

                 .ui-growl { left: 20px}

**Matt Handy** · Answer 2 · 2012-05-18 11:37:43

Your code looks fine.

I copied it in my testcase and it works: the growl element shows on the upper left corner. For this only the left:20px; is necessary (thanks @BalusC for commenting).

So the problem must be somewhere else. Do you have additional style definitions for your page that you omitted in your example? Try to isolate the issue by removing all unnecessary stuff.

This is my 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>

TechQA.

Custom positioning for p:growl

There are 2 answers

Related Questions in CSS

Related Questions in JSF

Related Questions in PRIMEFACES

Related Questions in GROWL

Popular Questions

Popular Tags

Trending Questions