Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom positioning for p:growl

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?

like image 949
z22 Avatar asked May 18 '12 10:05

z22


1 Answers

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>
like image 60
Matt Handy Avatar answered Sep 28 '22 12:09

Matt Handy