Primefaces f:facet name="first" and "last" in h:head not used for the order

Question

I wanted to override the appearance of .ui-menubar - however, anything I put in my default.css is not taking because it is overriden by the Primefaces components.css that somehow comes after it.

I have attempted to change the order by using facets as follows:

<h:head>
  <f:facet name="first">
    <title>Report Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </f:facet>
  <f:facet name="last">
    <h:outputStylesheet name="css/default.css"/>
  </f:facet>
</h:head>

Note that this section is part of a template.

Which renders as follows:

<head id="j_idt2">
  <title>Report Title</title>
  <meta http-equiv="X-UA-Compatible" content="IE=11; IE=10; IE=9; IE=8; IE=7; IE=EDGE">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/theme.css.xhtml?ln=primefaces-redmond">
  <link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/css/default.css.xhtml">
  <link type="text/css" rel="stylesheet" href="/my-web/javax.faces.resource/components.css.xhtml?ln=primefaces&amp;v=6.2">
  [javascript resources omitted for brevity ...]
</head>

I was using the latest Primefaces which is at time of writing 6.2.

The rendered output, clearly shows components.css after my custom default.css.

How can this be correctly ordered?

Note that I can override the style correctly if I avoid using <h:outputStylesheet>, example as follows:

  <f:facet name="last">
    <style>
      .ui-menubar  {
        padding: 0px;
        margin: 0px;
      }
    </style>
  </f:facet>

That is my workaround, but I consider that not a proper design by hardcoding this in my page, rather than a css.

Note that there are several other similar postings, but I need to emphasize that I DO use and want to use the proper ordering of <h:outputStylesheet> output, and not some other workaround using inline styles etc. Also I am not yet able to find a duplicate posting with a working answer, although I am continuing to research.

Also note that PrimeFaces documents the use of <f:facets> within the <h:head> tag very clearly:

PrimeFaces has it’s own HeadRenderer implementing the following order:

“first” facet if defined

Theme CSS

“middle” facet if defined

PF-JSF registered CSS and JS

Head content

“last” facet if defined

This means the last facet after anything else.

1: PF version, 2: where does your index.css end-up? 3: what is the more omitted? 4: what if you put the last facet before the first? — Kukeltje, Jan 02 '19 at 23:43
Updated info in original posting - and for (4./) changing the order of the facets changes exactly nothing. — YoYo, Jan 03 '19 at 01:25
I'm not sure why it was downvoted, I was interested in the same, as a workaround we are using `!importatnt` in our CSS files, but only because I found nothing better so far... — Betlista, Jan 03 '19 at 09:57
See https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles — Jasper de Vries, Jan 03 '19 at 12:39
Reference: https://www.primefaces.org/resource-rendering/ and https://stackoverflow.com/questions/25251019/jsf-ffacet-contents-not-rendered and https://www.mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces/ @JasperdeVries: Related link indeed, specificicalle the checking for additional headrenderers (like e.g. omnifaces?) — Kukeltje, Jan 03 '19 at 20:35
Well not as per [Official Primefaces documentation](https://www.primefaces.org/resource-rendering/) - see updated Posting and provided link - carefully note the use of `` inside `` - using it outside might be an unintended side effect. — YoYo, Jan 03 '19 at 20:35
A post on a website is not the officical documentation for a version... It is merely a reference it at least once worked. It is nowhere in the recent 6.2 docs. But the code is still there: https://github.com/primefaces/primefaces/blob/master/src/main/java/org/primefaces/renderkit/HeadRenderer.java and read _"You'll probably also see suggestions to put it in of which is understood by PrimeFaces-specific HeadRenderer, but this is unnecessarily clumsy and would break when you have your own (*read* or other) HeadRenderer."_ in the link by @JasperdeVries — Kukeltje, Jan 03 '19 at 20:44
Right - also I saw several postings by @BalusC suggesting that `` in `` is wrong. See http://stackoverflow.com/a/13917850/157882 and http://stackoverflow.com/a/8774997/157882 and him repeating that on a comment on https://www.mkyong.com/jsf2/primefaces/how-to-override-primefaces-css/ - I suspect something else is going wrong with the HeaderRender, like what happens if I include both Omnifaces and Primefaces in my project ... Omnifaces also has its own HeaderRender, and has a different approach - see https://stackoverflow.com/a/51073284/744133 — YoYo, Jan 03 '19 at 20:58
I have over 25 PrimeFaces + OmniFaces projects and put the CSS in the `` and it always properly comes after the PF CSS — Melloware, Jan 04 '19 at 13:41

score 1 · Answer 1 · edited Sep 19 '19 at 07:36

1

I had the same problem. I put the <facet name="last" inside the body and it worked.

edited Sep 19 '19 at 07:36

MaartenDev

5,631
5
21
33

answered Sep 19 '19 at 07:33

Kaya

11
2

Primefaces f:facet name="first" and "last" in h:head not used for the order

1 Answers1