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?
Answer
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>