p:layout and p:layoutUnit ignore the style

Question

My question is quite simple. I'm using PrimeFaces 4.0 and the layout component.

The problem comes, when I try to adjust its CSS. I want to set its background to none, I tried the classic style="background: none !important but it ignores me, then I inspect the element in Google Chrome and saw that the .ui-widget-content style was the one which I wanted to hide then I try this:

<p:layout style="min-width:400px;min-height:1000px; .ui-widget-content {background: none !important;}">
<p:layoutUnit position="west" size="620" minSize="40" style=".ui-widget-content {background: none !important;}">

But it still doesn't work. Plus, in my css theme I have:

body .ui-widget-content {

    border-style: hidden;
    border-color: white;
    border-width: 0px;
    color: #4f4f4f;
}

If I add the background: none in there it does work, but screw up the theme of my whole application. Is there a way to hide the background for that single widget-content?

score 5 · Accepted Answer · edited May 23 '17 at 11:46

5

Don't fiddle around with style attribute. Just give it a class which you declare in a CSS file.

<p:layout styleClass="backgroundless">

.ui-layout-container.backgroundless .ui-widget-content {
    background: none;
}

p:layout and p:layoutUnit ignore the style

1 Answers1

See also: