Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Stefan Schuhbaeck
CSS-Ordering in Liferay Single Page Application with JSF/Primefaces
August 29, 2017 7:13 AM
Answer

Stefan Schuhbaeck

Rank: New Member

Posts: 3

Join Date: August 29, 2017

Recent Posts

Hi,

After fixing the problem (Liferay Faces displays hidden fragments of primefaces comp. on navigation) with Primefaces componets while using Liferays Single Page Application setting, another issue occurs.

When SPA is activated an I use a cusstom Liferay Theme which overwrites PrimeFaces specific CSS Tags on each navigation step the default PrimeFace CSS will be loaded again but the Liferay Theme will not. Now the PrimeFaces StyleSheets will overwrite the Liferay Theme.

I already tried to use <f:facet name="first"> within the header of the xhtml file as mentioned here: Customizable Resource Ordering but the overwrite still happens.

If I remove the PrimeFace default CSS all together in the web.xml it works but I would like to use some of the default styles.
1    
2<context-param>
3    <param-name>primefaces.THEME</param-name>
4    <param-value>none</param-value>
5</context-param>


So my question would be, can I define the order of the Stylesheets within the header when using SPA ?
Kyle Joseph Stiemann
RE: CSS-Ordering in Liferay Single Page Application with JSF/Primefaces
August 30, 2017 11:26 AM
Answer

Kyle Joseph Stiemann

LIFERAY STAFF

Rank: Liferay Master

Posts: 573

Join Date: January 14, 2013

Recent Posts

Hi Stephan,
Can you provide the shortest, simplest portlet source code that will reproduce this problem?

I can give you a potential solution now, but it may not be correct and a reproducer would help. A potential solution would be to split up your styles into Liferay theme styles and custom PrimeFaces styles. The Liferay theme styles can be included in the theme. The custom PrimeFaces styles should be included in h:head after the PrimeFaces theme (in the middle facet):

<h:head>
<!-- ...your code here... -->
<f:facet name="middle">
<h:outputStylesheet name="custom-primefaces.css" />
</f:facet>
<!-- ...your code here... -->
</h:head>


- Kyle

Participate in the State of Liferay Community 2017. Help the community and even win some prizes!