Primefaces css overrides custom css

Question

.ui-orderlist .ui-orderlist-list {
    height: auto;
}

Should't it set height of list to auto? Because it does't work. In browser styles appears like

.ui-orderlist .ui-orderlist-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: auto;
    height: 200px;
    width: 200px;
}
.ui-orderlist .ui-orderlist-list {
    height: auto; // this line no active
}

You could give it a styleClass property and fix it in the CSS file. Is also better for maintenance — W vd L, May 18 '15 at 12:26
I'm not a CSS guru, adding !important ( height: auto !important; ) should make the css line always active. Better solution is to have a correct order of CSS files loading in the header. — W vd L, May 18 '15 at 12:47
@WvdL well, it works. the header contains only custom styles. — , May 18 '15 at 12:55

olexd · Answer 1 · 2015-05-18T13:46:11.847

0

You can override css rules by making them more specific than default primefaces rules and thus giving more "weight" for your custom rule. For example, wrap your order list with a < div class="some_class">< p:orderList ... />< /div> and provide css rule like:

div.some_class .ui-orderlist .ui-orderlist-list {
    height: auto;
}

You can read more about css specificity here and here.

Alternatively you could add an !important exception to your custom rule like:

.ui-orderlist .ui-orderlist-list {
    height: auto !important;
}

Such approach though is not recommended and should be used (as mentioned @Kukeltje in comment) as the last choice.

edited May 18 '15 at 13:46

answered May 18 '15 at 12:55

olexd

1,360
3
13
26

I'd switch the !important and specificity order in the post. Important should be a last resort – Kukeltje May 18 '15 at 13:27
Thanks for a suggestion. Reordered. – olexd May 18 '15 at 13:36

score -1 · Accepted Answer · answered May 18 '15 at 13:51

-1

I had the same issue some days ago. You have to make sure that your stylesheet gets loaded after default PrimeFaces CSS. You can achieve this by including your stylesheet in the following way:

<h:head>
    <f:facet name="last">
        <link type="text/css" rel="stylesheet" href="/css/yourstyle.css"></link>
    </f:facet>
</h:head>

PS: Please do not use !important.

answered May 18 '15 at 13:51

LarsBauer

1,539
18
23

This is PART of the answer, see the duplicate – Kukeltje May 18 '15 at 14:08
I can't see my answer anywhere in the question referenced as duplicate. – LarsBauer May 18 '15 at 14:09
Uhhmmmm… . the very first paragraph? **Load your CSS after PrimeFaces one** – Kukeltje May 18 '15 at 14:14

Primefaces css overrides custom css

2 Answers2