Changing the growl position on the center of the page

Question

I'm using jsf2.2 primefaces 6.0 and I already implemented a login interface with a growl to display the failure of the authentication. The issue now is that I want to display the growl in the center of the web page instead of the top right for better ergonomic result.

The xhtml code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:jsf="http://xmlns.jcp.org/jsf"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
    xmlns:p="http://primefaces.org/ui"
    template="/facelets/templateLogin.xhtml">
    <ui:define name="pageTitle">Please login ...</ui:define>
    <ui:define name="content">


        <div id="login-box" class="login-box visible widget-box no-border">
            <div class="widget-body">

                <div class="widget-main">

                    <h4 class="header blue lighter bigger">




                        <i class="fa fa-sign-in"></i> Entrer vos informations
                    </h4>

                    <div class="space-6"></div>

                    <div class="space-6"></div>
                    <div class="space-6"></div>

                    <h:form id="loginFormId">
                        <h:panelGrid id="grid"  cellpadding="5">
                        <p:growl id="growl" showDetail="true" sticky="true" />

                            <fieldset>
                                <label class="block clearfix"> <span
                                    class="block input-icon input-icon-right" > <p:inputText title="Entrer votre matricule"
                                            id="Matricule" value="#{identity.user.matricule}" required="true"
                                            class="form-control" pt:placeholder="Matricule" /><i
                                        class="ace-icon fa fa-user" /> <p:message for="Matricule" display="tooltip" />
                                </span>
                                </label> <label class="block clearfix" id="labelPassword"> <span
                                    class="block input-icon input-icon-right"> <p:password title="Entrer votre mot de passe"
                                            id="password" pt:placeholder="Mot de passe" required="true"
                                            value="#{identity.user.password}" styleClass="form-control" />
                                        <p:message for="password" display="tooltip" /> <i
                                        class="ace-icon fa fa-lock"></i>
                                </span>
                                </label>

                                <div class="space"></div>

                                <div class="clearfix">
                                    <!--  
                            <h:commandButton id="loginResetId"
                                styleClass=" width-35 pull-right btn btn-sm
                                btn-primary bigger-110"
                                value="Logout" action="#{auth.doLogOut()}">
                            </h:commandButton>
                            -->
                                    <button type="submit" jsf:action="#{identity.doLogin()}"
                                        class="width-35 pull-right btn btn-sm btn-primary">
                                        <i class="ace-icon fa fa-key"></i> <span class="bigger-110">S'identifier</span>
                                    </button>
                                    <br></br> <br></br>
                                    <h:panelGrid
                                        rendered="#{not empty authentificationBean.message}">
                                        <div class="alert alert-danger">

                                            #{authentificationBean.message} <br />
                                        </div>

                                    </h:panelGrid>
                                </div>
                            <h:outputLink id="pdfLink" value="http://localhost:18080/openCars/pdf/tableauAssurance.pdf" style="color: #000000;text-decoration: underline"><h5><b>Annexe à l'avenant</b></h5></h:outputLink>
                            <p:tooltip id="toolTipTrack" for="pdfLink" value="Télécharger l'annexe de l'avenant" trackMouse="true" />   
                                <div class="space-4"></div>
                            </fieldset>
                        </h:panelGrid>
                    </h:form>
                    <!--  
                <div class="social-or-login center">
                    <span class="bigger-110">Or Login Using</span>
                </div>

                <div class="space-6"></div>

                <div class="social-login center">
                    <a class="btn btn-primary"> <i class="ace-icon fa fa-facebook"></i>
                    </a> <a class="btn btn-info"> <i class="ace-icon fa fa-twitter"></i>
                    </a> <a class="btn btn-danger"> <i
                        class="ace-icon fa fa-google-plus"></i>
                    </a>
                </div>
                -->
                </div>
                <!-- /.widget-main -->
                <h:form id="loginNavId">
                    <div class="toolbar clearfix">
                        <div></div>


                    </div>
                </h:form>
            </div>
            <!-- /.widget-body -->
        </div>
        <!-- /.login-box -->
    </ui:define>
</ui:composition>

And the actual problem is? I don't see any attempt here to position the growl in the center. And does it work if you remove the loginForm etc? — Kukeltje, Jun 30 '17 at 11:05
i don't know how to position the growl in the center and it work's fine — user8232074, Jun 30 '17 at 11:07
So if you remove the loginform the grows is positioned in the center? Then look at how the loginform influences the growls' positioning — Kukeltje, Jun 30 '17 at 11:08
i used the growl only for the authentification page and juste the growl is in default mode on top right i need to place it on the center of the page that's all. — user8232074, Jun 30 '17 at 11:10
Possible duplicate of [How do you easily horizontally center a
using CSS?](https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css) — Kukeltje, Jun 30 '17 at 14:08

Hatem Alimam · Accepted Answer · 2017-06-30T14:12:24.427

6

You may include this piece of CSS to center the growl in the page:

div.ui-growl {
   left: 50%;
   right: 0;
   margin-left:-150px;
}

edited Jun 30 '17 at 14:12

answered Jun 30 '17 at 12:12

Hatem Alimam

9,968
4
44
56

Thanks for the answer... nitpick: 50% is not centered at least not the center of the growl ;-) adding a margin-left:-150px does (the growl is 300px wide). And effectivly it is a duplicate of https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css – Kukeltje Jun 30 '17 at 14:07
@Kukeltje correct, thanks for the comment, I'll update the answer for more centered result. – Hatem Alimam Jun 30 '17 at 14:10
Thanks, but imho it is better to flag the Q as a duplicate... Way more info in those answers (for OP to learn from) – Kukeltje Jun 30 '17 at 14:11
Centering a div is the most asked topic ever maybe :D, but nevertheless it can have a direct answer for a specific google search for example, as it contains a simple and direct selector to the growl itself. @Kukeltje – Hatem Alimam Jun 30 '17 at 14:14
Yes, but the OP learns little from it. Therefor I did not even answer it or originally marked it as a duplicate. OP did not learn to use a developer tool to see it was actually all in a div, tried to apply css/selectorsa. Did not learn to use a searchengine with the right terms, read about a cool html5/css3 solution that does not need to know about the size... etc... So effectively got fish instead of learned how to fish... (And no this is not a rant at you, not at all.... ;-) cheers) – Kukeltje Jun 30 '17 at 14:45
Well I must admit a few times back, I got some fish without learning how to fish at all :) have a great weekend, Cheers. – Hatem Alimam Jun 30 '17 at 14:51

Changing the growl position on the center of the page

1 Answers1