Keep p:messages at top of login page

[pholding]

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

[mert.sincan]

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>
    ...        

[pholding]

Hi Aragorn

Thank you, that's fixed the problem.

Kind Regards

Paul

[mert.sincan]

Glad to hear, thanks for the update!

Regards