How to hide a white space under the north layout in primefaces?

Question

I have a white line under the top-layout in Primefaces I cannot remove. Can you help me? Here's my code:

<h:body>
    <p:layout fullPage="true">
        <p:layoutUnit position="north" size="80" styleClass="top">
        some content here
        </p:layoutUnit>
        <p:layoutUnit position="center" styleClass="contentStyle">
            <ui:insert name="content"/>
        </p:layoutUnit>
        </p:layout>
</h:body>

and my (external) stylesheet is:

.top {
background: #3a87ad; 
}

.contentStyle {
background: #9EADC8;
}

Between these two layoutUnits i see a white space. Please help me removing it :)

what is the relation of the stylesheet to the problem? Isn't the same happening if you fully remove it? I think it is. Duplicate?: http://stackoverflow.com/questions/23571187 — Kukeltje, Nov 26 '15 at 14:40
Or better, this one: http://stackoverflow.com/questions/25215861/removing-gutters-from-playout — Kukeltje, Nov 26 '15 at 14:46

Keshan Fernando · Answer 1 · 2019-02-26T08:40:37.500

We have recently upgraded to JSF version 2.3. After that, this unknown space issue is there in the interface where we use Primefaces layouts. In my scenario, this issue is automatically getting fixed for the following options:

When refresh the page (F5) without clearing cache (Ctrl+F5).
When browser window is resized.

I have tried many solutions for resizing the window using JavaScript to the same size, but Chrome and Opera latest versions does not support that feature. Therefore, I found a solution with the above first option. You can refresh the page only once using JavaScript as explained below:

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#home';
        window.location.reload();
    }
}

Edit 1: And if one reload is not enough, try the following code

window.onload = function() {
    if(!window.location.hash) {
        window.location = window.location + '#home';
        window.location.reload();
    } else if (window.location.hash == '#home') {
        window.location = window.location + '#home2';
        window.location.reload();
    }
}

Edit 2: Finally this problem is solved by internal styling instead of external styling. The reason was because the styles in external style sheets were not applied in the very first renderings.

Lucian · Answer 2 · 2016-03-27T00:37:43.780

Even tough some of you may consider that this post is a duplicate I have also encountered a similar problem on PrimeFaces 5+.

In order to solve the problem I had to set the besides the collapsible and gutter attributes for each layoutUnit

<p:layoutUnit collapsible="true" gutter="1"> </p:layoutUnit>

the padding for each of the following elements to 0 using CSS.

.ui-layout-unit, ui-layout-unit, ui-widget, ui-widget-content, ui-corner-all, ui-layout-north, ui-layout-pane, ui-layout-pane-north {
border: none; padding:0;
}

tip: inspect your page, rollover the white spaces and check for the classes that extend way over your needs.

score -1 · Answer 3 · edited Nov 26 '15 at 14:43

-1

.top {
    background: #3a87ad; 
}

.contentStyle {
    background: #9EADC8;
}

add

float:left; width 100%; or white space:normal

I think it works

edited Nov 26 '15 at 14:43

Kukeltje

12,223
4
24
47

answered Jan 24 '15 at 13:26

Jenti Dabhi

870
5
11

add it where? Can you improve the answer? – Kukeltje Nov 26 '15 at 14:45

score -1 · Answer 4 · answered Jan 24 '15 at 22:46

-1

can you try add !important;

as follows below code

.top {
background: #3a87ad !important; 
}

.contentStyle {
background: #9EADC8 !important;
}

answered Jan 24 '15 at 22:46

Ömer Faruk Kurt

500
3
14

I nowhere read that the custom style of the OP was not applied. So how would adding !important fix it? (and it is better to never use important but make your selectors more specific) – Kukeltje Nov 26 '15 at 14:42

How to hide a white space under the north layout in primefaces?

4 Answers4