Skip to main content

JSF Layout Issue

Please note these forums are being decommissioned and use the new and improved forums at
No replies
Joined: 2014-02-05

Hi forum,

I have a layout issue.

Following Situation:

I have a small WebApp using JSF/MyFaces and Primefaces.

This WebApp contains two pages

1) Login.xhtml
This page shows a Login-Dialog (application logo / username/password/login button)

2) UserTableScreen.xhtml
This table is the implementation of a JSF-template (The template is made of a composition of three pages for header(primefaces menubar)/content and footer) replacing the content of the template showing a primefaces datatable which contains all users known in the system and CRUD-buttons)

I deploy that webapp using maven on a recent Jetty-Server.

I used ThemeRoller to design a custom Primefaces Theme and some additional CSS-magic within the pages / the page template to get the intended look of the application (global background color; ui-widget-font-size 90%...). I wrote the CSS-statements using FireBug on Firefox 26.

Login.xhtml relies on “common.css” and “login.css”
UserTableScreen.xhtml relies on a template, that relies only on “common.css”

Because I was sure there should be a way to make the login-page resemble the Windows Login dialog I searched for a way to center the content horizontally AND VERTICALLY on the login-page. The latter is a bit tricky. Not wanting a high sophisticated JavaScript-based solution, I included the following statement in my “login.css”

#image {
margin-top: 17%;

I am aware, that this is a rather ugly hack and might not be feasible on all devices and all screen resolutions.

If I open Login.jsf or UserTableScreen.jsf directly in my browser everything is ok and looks as expected.

However, of course I want to view the pages not isolated, but within the regular application business logic flow.
Therefor I added the two pages to my faces-config and added a navigation case from Login.xhtml with outcome “OK” (username is known and password is correct) to Page UserTableScreen.xhtml

Now I ran into a problem when using Chrome:
UserTableScreen is shown and datatable is populated with data.
But the position of the DataTable is not at the top right beneath the menubar, but it’s moved down towards the vertical center of the screen.

Using FireFox 26 the DataTable has the correct position (right beneath the menubar) but I experience some “layout-glitches” when switching from Login.jsf to UserTableScreen.jsf.

So it feels like I unwillingly joined the dark side. Of course I always want the correct datable positioning and of course I don’t want the user to experience any layout glitches in the application.

So the question is: Why do I experience these problems? Probably browser is caching some CSS? But common.css does not contain any rules, that might cause the datatable to move and the UserTableScreen.xhtml only relies on common.css… And because what I’m doing just doesn’t feel right: How could I increase the design?
Just to mention it again: Both pages look ok, when viewed in Chrome or Firefox directly without page-flow.

Any help is appreciate, last comment gets a free cookie!