PrimeFaces Grid CSS not applied since css classes are not found?
12,787
Solution 1
If there is no PF component on page, you need to add it manually.
<h:outputStylesheet name="grid/grid.css" library="primefaces" />
Solution 2
it seems like primefaces.css not included. so should be least one primefaces component in xhtml page. try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head/>
<h:body>
<p:outputPanel>
<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>
</p:outputPanel>
</h:body>
</html>
Solution 3
Actually I run into the same issue. The important part is, that the grid Layout is only supported from version 5.1 on!
Author by
Socrates
Updated on June 22, 2022Comments
-
Socrates almost 2 years
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> -
questionaire over 8 yearsTaht's not the truth. Since version 5.1 Grid layout should work out of the box.
