Socrates Socrates - 2 months ago 50
CSS Question

PrimeFaces Grid CSS won't work?

I am trying to get the PrimeFaces Grid CSS working, but it won't work. I followed the example on the PrimeFaces page, but when I run it through the browser all the DIV entries are shown in a vertical list. Where is the error?
I have the following XHTML:

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head/>
<h:body>
<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">Col1</div>
<div class="ui-grid-col-4">Col2</div>
<div class="ui-grid-col-4">Col2</div>
</div>
</div>

<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>

<div class="ui-grid">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-4">4</div>
</div>
</div>

<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>

<div class="ui-grid ui-grid-fixed">
<div class="ui-grid-row">
<div class="ui-grid-col-4">4</div>
<div class="ui-grid-col-8">8</div>
</div>
</div>
</h:body>
</html>

Answer

If there is no PF component on page, you need to add it manually.

<h:outputStylesheet name="grid/grid.css" library="primefaces" />
Comments