use*_*074 2 growl primefaces jsf-2.2
我正在使用 jsf2.2 primefaces 6.0，并且我已经实现了一个带有咆哮声的登录界面来显示身份验证失败。现在的问题是，我想在网页中央而不是右上角显示咆哮，以获得更好的人体工程学效果。
\n\nxhtml代码：
\n\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<ui:composition xmlns="http://www.w3.org/1999/xhtml"\n xmlns:h="http://xmlns.jcp.org/jsf/html"\n xmlns:f="http://xmlns.jcp.org/jsf/core"\n xmlns:ui="http://xmlns.jcp.org/jsf/facelets"\n xmlns:jsf="http://xmlns.jcp.org/jsf"\n xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"\n xmlns:p="http://primefaces.org/ui"\n template="/facelets/templateLogin.xhtml">\n <ui:define name="pageTitle">Please login ...</ui:define>\n <ui:define name="content">\n\n\n <div id="login-box" class="login-box visible widget-box no-border">\n <div class="widget-body">\n\n <div class="widget-main">\n\n <h4 class="header blue lighter bigger">\n\n\n\n\n <i class="fa fa-sign-in"></i> Entrer vos informations\n </h4>\n\n <div class="space-6"></div>\n\n <div class="space-6"></div>\n <div class="space-6"></div>\n\n <h:form id="loginFormId">\n <h:panelGrid id="grid" cellpadding="5">\n <p:growl id="growl" showDetail="true" sticky="true" />\n\n <fieldset>\n <label class="block clearfix"> <span\n class="block input-icon input-icon-right" > <p:inputText title="Entrer votre matricule"\n id="Matricule" value="#{identity.user.matricule}" required="true"\n class="form-control" pt:placeholder="Matricule" /><i\n class="ace-icon fa fa-user" /> <p:message for="Matricule" display="tooltip" />\n </span>\n </label> <label class="block clearfix" id="labelPassword"> <span\n class="block input-icon input-icon-right"> <p:password title="Entrer votre mot de passe"\n id="password" pt:placeholder="Mot de passe" required="true"\n value="#{identity.user.password}" styleClass="form-control" />\n <p:message for="password" display="tooltip" /> <i\n class="ace-icon fa fa-lock"></i>\n </span>\n </label>\n\n <div class="space"></div>\n\n <div class="clearfix">\n <!-- \n <h:commandButton id="loginResetId"\n styleClass=" width-35 pull-right btn btn-sm\n btn-primary bigger-110"\n value="Logout" action="#{auth.doLogOut()}">\n </h:commandButton>\n -->\n <button type="submit" jsf:action="#{identity.doLogin()}"\n class="width-35 pull-right btn btn-sm btn-primary">\n <i class="ace-icon fa fa-key"></i> <span class="bigger-110">S\'identifier</span>\n </button>\n <br></br> <br></br>\n <h:panelGrid\n rendered="#{not empty authentificationBean.message}">\n <div class="alert alert-danger">\n\n #{authentificationBean.message} <br />\n </div>\n\n </h:panelGrid>\n </div>\n <h:outputLink id="pdfLink" value="http://localhost:18080/openCars/pdf/tableauAssurance.pdf" style="color: #000000;text-decoration: underline"><h5><b>Annexe \xc3\xa0 l\'avenant</b></h5></h:outputLink>\n <p:tooltip id="toolTipTrack" for="pdfLink" value="T\xc3\xa9l\xc3\xa9charger l\'annexe de l\'avenant" trackMouse="true" /> \n <div class="space-4"></div>\n </fieldset>\n </h:panelGrid>\n </h:form>\n <!-- \n <div class="social-or-login center">\n <span class="bigger-110">Or Login Using</span>\n </div>\n\n <div class="space-6"></div>\n\n <div class="social-login center">\n <a class="btn btn-primary"> <i class="ace-icon fa fa-facebook"></i>\n </a> <a class="btn btn-info"> <i class="ace-icon fa fa-twitter"></i>\n </a> <a class="btn btn-danger"> <i\n class="ace-icon fa fa-google-plus"></i>\n </a>\n </div>\n -->\n </div>\n <!-- /.widget-main -->\n <h:form id="loginNavId">\n <div class="toolbar clearfix">\n <div></div>\n\n\n </div>\n </h:form>\n </div>\n <!-- /.widget-body -->\n </div>\n <!-- /.login-box -->\n </ui:define>\n</ui:composition>\n您可以包含这段 CSS 以使咆哮在页面中居中：
div.ui-growl {
left: 50%;
right: 0;
margin-left:-150px;
}
| 归档时间： |
|
| 查看次数： |
4419 次 |
| 最近记录： |