Custom positioning for p:growl

Question

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?

In the styling are'nt you missing position:relative or position:absolute? — Kennet, May 18 '12 at 10:35
edited my question...still the same problem...growl position isnt changing. where am i wrong? — z22, May 18 '12 at 10:50
@Kennet: Unnecessary. That's already in the default style of `p:growl`. — BalusC, May 18 '12 at 11:48
while copying code from primefaces demos package statement also to be copied to your index jsf Otherwise the demos may malfuntion — Veeramani abboy, Dec 19 '16 at 05:53

Matt Handy · Answer 1 · 2012-05-18T12:21:17.047

4

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>

edited May 18 '12 at 12:21

answered May 18 '12 at 11:37

Matt Handy

29,855
2
89
112

Actually, only the `left` property has been sufficient. Others are identical as the default `.ui-growl` style. – BalusC May 18 '12 at 11:48
@Matt Handy: thanks , yes i have additional styles defined, and when i remove the additional css the growl positioning works fine. but the additional css files are necessary for my app, and i also want the growl to work in customized way. what should i do? – z22 May 18 '12 at 13:18
Did you try `left:20px !important` ? – Matt Handy May 18 '12 at 14:18
Another idea: Give the growl an id and try to modify the style with an id selector. It has precedence over the class style. But note that the generated id in the html source is different than the you define (e.g. if you define an id `growl` then he generated html id for the div is `growl_container`. – Matt Handy May 18 '12 at 17:42
i tried #growl{ left:20px !important; } still doesnt work – z22 May 18 '12 at 17:54
No, `growl` is not the client id. Check with firebug which is the correct one. – Matt Handy May 18 '12 at 17:56
i checked in firebug it shows so i tried #frm:growl{ left:20px !important; } still not working... where am i getting wrong? – z22 May 18 '12 at 18:02
`left: 20px` is not sufficient, should also reset `right to somthing like `right: auto` or `right: ` – Mohsen Jan 29 '13 at 18:18

Halis Yılboğa · Answer 2 · 2014-01-11T20:03:21.523

2

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}

edited Jan 11 '14 at 20:03

answered Sep 10 '13 at 08:00

Halis Yılboğa

850
10
12

3

The `!important` is here a hack. You should remove it and make sure that your PrimeFaces override CSS file is loaded the right way. See also http://stackoverflow.com/a/8774997/ – BalusC Sep 10 '13 at 10:40

Custom positioning for p:growl

2 Answers2