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

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.

edited Jan 3 at 20:41

asked Jan 2 at 23:36

YoYo

5,18343761

1

Updated info in original posting - and for (4./) changing the order of the facets changes exactly nothing.

– YoYo
Jan 3 at 1:25

1

See stackoverflow.com/questions/8768317/…

– Jasper de Vries
Jan 3 at 12:39

2

Yep move your <f:facet name="last"> to the <h:body> section and get it out of <h:head>

– Melloware
Jan 3 at 13:22

1

Reference: primefaces.org/resource-rendering and stackoverflow.com/questions/25251019/… and mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces @JasperdeVries: Related link indeed, specificicalle the checking for additional headrenderers (like e.g. omnifaces?)

– Kukeltje
Jan 3 at 20:35

1

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: github.com/primefaces/primefaces/blob/master/src/main/java/org/… and read "You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> 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 3 at 20:44

|
show 6 more comments

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.

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.

edited Jan 3 at 20:41

asked Jan 2 at 23:36

YoYo

5,18343761

1

Updated info in original posting - and for (4./) changing the order of the facets changes exactly nothing.

– YoYo
Jan 3 at 1:25

1

See stackoverflow.com/questions/8768317/…

– Jasper de Vries
Jan 3 at 12:39

2

Yep move your <f:facet name="last"> to the <h:body> section and get it out of <h:head>

– Melloware
Jan 3 at 13:22

1

Reference: primefaces.org/resource-rendering and stackoverflow.com/questions/25251019/… and mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces @JasperdeVries: Related link indeed, specificicalle the checking for additional headrenderers (like e.g. omnifaces?)

– Kukeltje
Jan 3 at 20:35

1

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: github.com/primefaces/primefaces/blob/master/src/main/java/org/… and read "You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> 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 3 at 20:44

|
show 6 more comments

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.

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.

edited Jan 3 at 20:41

asked Jan 2 at 23:36

YoYo

5,18343761

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.

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.

jsf primefaces facelets

edited Jan 3 at 20:41

asked Jan 2 at 23:36

YoYo

5,18343761

edited Jan 3 at 20:41

asked Jan 2 at 23:36

YoYo

5,18343761

edited Jan 3 at 20:41

asked Jan 2 at 23:36

YoYo

5,18343761

asked Jan 2 at 23:36

YoYo

5,18343761

asked Jan 2 at 23:36

YoYo

5,18343761

1

Updated info in original posting - and for (4./) changing the order of the facets changes exactly nothing.

– YoYo
Jan 3 at 1:25

1

See stackoverflow.com/questions/8768317/…

– Jasper de Vries
Jan 3 at 12:39

2

Yep move your <f:facet name="last"> to the <h:body> section and get it out of <h:head>

– Melloware
Jan 3 at 13:22

1

Reference: primefaces.org/resource-rendering and stackoverflow.com/questions/25251019/… and mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces @JasperdeVries: Related link indeed, specificicalle the checking for additional headrenderers (like e.g. omnifaces?)

– Kukeltje
Jan 3 at 20:35

1

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: github.com/primefaces/primefaces/blob/master/src/main/java/org/… and read "You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> 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 3 at 20:44

|
show 6 more comments

1

Updated info in original posting - and for (4./) changing the order of the facets changes exactly nothing.

– YoYo
Jan 3 at 1:25

1

See stackoverflow.com/questions/8768317/…

– Jasper de Vries
Jan 3 at 12:39

2

Yep move your <f:facet name="last"> to the <h:body> section and get it out of <h:head>

– Melloware
Jan 3 at 13:22

1

Reference: primefaces.org/resource-rendering and stackoverflow.com/questions/25251019/… and mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces @JasperdeVries: Related link indeed, specificicalle the checking for additional headrenderers (like e.g. omnifaces?)

– Kukeltje
Jan 3 at 20:35

1

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: github.com/primefaces/primefaces/blob/master/src/main/java/org/… and read "You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> 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 3 at 20:44

Updated info in original posting - and for (4./) changing the order of the facets changes exactly nothing.

– YoYo
Jan 3 at 1:25

See stackoverflow.com/questions/8768317/…

– Jasper de Vries
Jan 3 at 12:39

Yep move your <f:facet name="last"> to the <h:body> section and get it out of <h:head>

– Melloware
Jan 3 at 13:22

Reference: primefaces.org/resource-rendering and stackoverflow.com/questions/25251019/… and mkyong.com/jsf2/primefaces/resource-ordering-in-primefaces @JasperdeVries: Related link indeed, specificicalle the checking for additional headrenderers (like e.g. omnifaces?)

– Kukeltje
Jan 3 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: github.com/primefaces/primefaces/blob/master/src/main/java/org/… and read "You'll probably also see suggestions to put it in <f:facet name="last"> of <h:head> 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 3 at 20:44

|
show 6 more comments

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54014586%2fprimefaces-ffacet-name-first-and-last-in-hhead-not-used-for-the-order%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu