I'm trying to eliminate the buffer or "resizer" that exists between the North and Center layout. I have used fullPage=true b/c I like that it auto resizes. The border from the edge of the screen to the main body of content is set to a color and I accomplished this by setting the body background to the color and I the north and center layouts white. The problem is that the color of the background shows through separating the north and center. I used firefox/firebug and noticed that there is a resizer there that I can remove with this line:
.ui-layout-resizer, .ui-layout-resizer-north, ui-layout-resizer-open, .ui-layout-resizer-north-open
{
height: 0px !important;
}
Unfortunately Primefaces still places the center layout [I suspect] 6 px below north even thought the resizer is gone. The result is the background color showing through as a division. I have tried setting center to position relative and height to -6px to no effect. I admit, I'm not the most advanced with CSS but can anyone suggest how I can make a seamless transition with no gap from North to Center. I have tried messing with padding/border/margins to 0 but the issue after examing firebug appears to be the absolute placement of the "center" region 6px south of north so that the layout resizer has room to exist even though I deleted it.
The workaround is to put everything in the Center and do away with North but I don't know if this is bad design.
See Question&Answers more detail:os