Primefaces css missing

Question

I'm completely new to PrimeFaces, so sorry if this is a stupid question.

According to the primefaces.org website, there's no configuration needed. You just put the primefaces jar in your classpath and add the namespace to the page, and that's it. This is exactly what I did, and I can access and create the primefaces components, but no style is applied to them.

This is what the page source looks like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">

<head><title>...</title></head>

<body>
    <p:accordionPanel>
        <p:tab title="First Tab Title">
            <h:outputText value= "Lorem"/>
        </p:tab>
        <p:tab title="Second Tab Title">
            <h:outputText value="Ipsum" />
        </p:tab>
    </p:accordionPanel>
</body>
</html>

And this is what's rendered

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>...</title></head>

<body><div id="j_id_3" class="ui-accordion ui-widget ui-helper-reset ui-hidden-container" role="tablist"><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true"><span class="ui-icon ui-icon-triangle-1-s"></span><a href="#" tabindex="-1">First Tab Title</a></h3><div id="j_id_3:j_id_4" class="ui-accordion-content ui-helper-reset ui-widget-content" role="tabpanel" aria-hidden="false">Lorem</div><h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false"><span class="ui-icon ui-icon-triangle-1-e"></span><a href="#" tabindex="-1">Second Tab Title</a></h3><div id="j_id_3:j_id_6" class="ui-accordion-content ui-helper-reset ui-widget-content ui-helper-hidden" role="tabpanel" aria-hidden="true">Ipsum</div><input type="hidden" id="j_id_3_active" name="j_id_3_active" value="0" /></div><script id="j_id_3_s" type="text/javascript"><!--
PrimeFaces.cw('AccordionPanel','widget_j_id_3',{id:'j_id_3',active:0});
//--></script>
</body>
</html>

As you can see, the primefaces component is rendered, with all css styles attached, but there's no reference to any style sheet rendered. Should this be rendered automatically, or is this something I should add to the page?

I'm using myFaces 2.1.5, PrimeFaces 3.5 and I'm running it on Tomcat 7.0.26

score 6 · Accepted Answer · edited May 23 '17 at 12:06

The <head> incompatibility with Primefaces, the <h:head> will include automatically all necessary JavaScript files for Css files for layout, so when you don't use it,Css will not be included automatically.

If you want to include automatically CSS, you should use <h:head>, not <head>:

<h:head>
// ...
</h:head>
<h:body>
// ...
</h:body>

Other reference question: unable-to-understand-hhead-behaviour

Primefaces css missing

1 Answers1