1

I'm using PrimeFaces 5.0. I'm having a trouble setting gutter in <p:layout>.

<p:layout id="templateLayout" fullPage="false">

    <p:layoutUnit id="header" position="north" size="155" gutter="0">
    </p:layoutUnit>

    <p:layoutUnit position="west" id="leftPanel" size="225" gutter="0">
    </p:layoutUnit>

    <p:layoutUnit position="east" size="200" gutter="0">
    </p:layoutUnit>

    <p:layoutUnit id="content" position="center" size="2500"
                  style="z-index: 1;" maxSize="2500" gutter="0">
    </p:layoutUnit>

    <p:layoutUnit id="footer" position="south" size="90" gutter="0">
    </p:layoutUnit>

</p:layout>

Event though the gutter attribute is set to 0 everywhere, the gutters between <p:layoutUnit> are not removed. The only gutter which is removed is between the east and the center units.

Tried to apply the following CSS alternatively.

.ui-layout-unit {
    padding-top: 0 !important;
    padding-right:  0 !important;
    padding-bottom:  0 !important;
    padding-left:  0 !important;
}

and

.ui-layout-resizer, 
.ui-layout-resizer-north, 
.ui-layout-resizer-open,
.ui-layout-resizer-north-open {
     height:0px !important;
}

But that did not make a difference either.

How to remove all gutters from <p:layout> then?

Tiny
  • 27,221
  • 105
  • 339
  • 599
  • 1
    this may help? http://stackoverflow.com/questions/12669578/eliminate-the-elements-that-separates-primefaces-layoutunit-after-generate-html – Carol McKay Aug 09 '14 at 08:37
  • No I set all gutters to zero in addition to using the CSS class mentioned in one of the answers there. – Tiny Aug 09 '14 at 19:38

1 Answers1

2

I just had the same problem.

What I did was using the following properties in the layoutUnit component:

collapsible="true" gutter="0"

It seems that gutter doesn't work unless you use it with collapsible.

The credit goes to the good people of Primefaces Forum:

Layout Unit Gutter Has No Effect @PrimefacesForum

Sebastian D'Agostino
  • 1,575
  • 2
  • 27
  • 44
  • I gave it a try, it worked. By the way, I dropped using the `` thing in its entirely and went towards using a plain/vanilla HTML/CSS template, since I needed a template with a sticky footer which `` does not support out of the box unless some tedious [hacks](http://stackoverflow.com/a/23372523/1391249) are made. Thanks for the answer. – Tiny Dec 19 '14 at 10:22