Using & lt; h: outputStylesheet & gt; render & lt; p: outputLabel & gt; invisible component

advertisements

I have a rather strange issue with a webpage I'm working on in JSF. Basically, when I include the stylesheet for the website, using an h:outputStylesheet tag, the outputLabel component representing the document's title disappears.

The outputLabel is in the page source, and the rendered attribute = true, but it's invisible.

I'm using JSF2.2, PrimeFaces 5.1, OmniFaces 1.8 (though there aren't any omnifaces tags on the page), in netbeans with Glassfish 4.1. Testing in Chrome Version 38.0.2125.111 m.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:pf="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Activity View</title>
        <h:outputStylesheet library="stylesheets" name="main.css"/>
    </h:head>
    <h:body>
        <div id="title" class="pageHeader">
            <pf:outputLabel value="Activity: [Title]: [Type]"/>
        </div>
        <div>
            <pf:accordionPanel>
                <pf:tab title="Brief" >
                    <p>
                    </p>
                </pf:tab>
            </pf:accordionPanel>
        </div>
    </h:body>
</html>

Here's the CSS:

.pageHeader{
font-size: x-large;
float: left;
margin-right: 10px;

}

Can anyone shed any light on why this might be the case? I've used this pattern elsewhere on the site without any issues.


The cause is float: left; - you can verify this by selecting the div and disabling the styles one by one in firebug:

The floating makes the divs overlap as described here.

So you can either

  • delete float: left;. Seems to make no difference with current code.
  • put style="clear: both" on the div just below

and there are even more solutions, its called "clearfix".