DataTable/Toolbar not switching on Layout Mode change during runtime

support@terra-se.com · 23 Jun 2023, 08:20

Hello,

I applied rain theme to my web project without using the crud.xhtml provided. When I change Layout Mode, components like DataTable/Toolbar header did not change, but the topbars, menu and etc works fine.

Is there any special style class I need to apply to my component for the theme to take effect?

This is my web.xml primefaces theme

Code: Select all

<context-param>
		<param-name>primefaces.THEME</param-name>
		<param-value>#{sessionBean.userPreference.theme}</param-value>
	</context-param>

In my UserPreference I have a getter of theme refering to the GuestPreferences provided with a little changes, adding the "rain-" in front else it will show error unable to locate theme.css.

Code: Select all

public String getTheme() {
		return "rain" + '-' + this.componentTheme + '-' + this.darkMode;
	}

In addition, I also reorganized the template files under webapp/templates/ folder instead of the original webapp/WEB-INF/, not sure is this related or not.

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/templates/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:sec="http://www.springframework.org/security/tags">

Not sure how to post image here, but here is a link to the outcome it looks like when I switch from original Dark mode to Light mode.
https://imgur.com/a/tuUGmUI

Please kindly assist, thanks.

support@terra-se.com · 28 Jun 2023, 08:21

Resolved by removing the code in config.xhtml when changing layout

Code: Select all

onchange="PrimeFaces.RainConfigurator.changeLayout('#{guestPreferences.layoutPrimaryColor}', '#{guestPreferences.componentTheme}', event.target.value)"

And refresh the page after persisting the value for preference with

Code: Select all

<p:ajax listener="#{sessionBean.savePreference()}" oncomplete="setTimeout(function() {document.forms[0].submit()}, 500)" />

Please close case, thanks.

olgubasak · 03 Jul 2023, 13:43

Hi,

Thanks for the update.
Best Regards,

ulnaoperating · 12 Mar 2024, 12:47

When modifying the layout, the issue was resolved by removing the gorilla tag code from the config.xhtml file.

DataTable/Toolbar not switching on Layout Mode change during runtime

Who is online