RE: CSS-Ordering in Liferay Single Page Application with JSF/Primefaces

2017-08-30T18:26:44Z

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>

<f:facet name="middle">
<h:outputStylesheet name="custom-primefaces.css" />
</f:facet>

</h:head>

- Kyle

CSS-Ordering in Liferay Single Page Application with JSF/Primefaces

2017-08-29T13:55:42Z

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.

 	
<context-param>
	<param-name>primefaces.THEME</param-name>
	<param-value>none</param-value>
</context-param>

So my question would be, can I define the order of the Stylesheets within the header when using SPA ?