Hi
I'm trying to adapt the login.xhtml page provided with the Barcelona layout for use within my application and would like use the p:messages component at the top of the page to display error details (e.g Incorrect username/password, etc) but I'm having some issues with the CSS side of things.
The issue is that p:messages component appears 200px from the top of the page and I can't see a way of keeping the p:messages at the top without affecting the position of the of the login panel. If set "margin-top:-200px" on the p:messages component then it's in desired position but it also causes the login-panel to move up the screen. If I remove the "padding-top:200px" element from the login-body style class then the p:messages component is almost in the right place but I then can't get the login-panel back into its original position.
Is it possible to get the p:messages component at the top of the page without any margin whilst keeping the login-panel in the position of the original login.xhtml page provided with the layout?
Any help would be greatly appreciated.
Many thanks
Paul
Keep p:messages at top of login page
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Could you please try the following css ?
Code: Select all
//Css
<style type="text/css">
.login-body .ui-messages {
position: fixed;
top: 0px;
width: 100%;
}
</style>
//Xhtml
<h:body styleClass="login-body">
<h:form>
<p:messages showDetail="true" autoUpdate="true" closable="true" />
<div class="login-panel ui-fluid">
...
</div>
...
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks for the update!
Regards
Regards
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 13 guests