Primefaces portlet style problem

[蔡 孟佑, geändert vor 10 Jahren.]

Hi,
I am developing a JSF portlet by using PrimeFaces 4.0 and Liferay Portal 6.2. Some PrimeFaces components style are more different than the showcase of PrimeFaces.

My portlet with p:spinner and p:selectOneMenu:


Showcase of PrimeFaces:




I think that maybe Liferay Portal's css affect PrimeFaces theme. Any idea this problem?
Thanks.

[Oliver Bayer, geändert vor 10 Jahren.]

Hi,

it seems that some css is overriding the primefaces styles. You can try the following to solve this issue. Use firebug or some other browser tool to inspect which style is messing up the primefaces style. Now you can override the wrong section by appending "!important;" e.g. "p { background-color: red !important; } to your rule.

HTH Oli

[Neil Griffin, geändert vor 10 Jahren.]

I would recommend that you read this other thread titled Primefaces theme override custom Liferay theme.

[Jack Tsai, geändert vor 10 Jahren.]

Neil Griffin:

I would recommend that you read this other thread titled Primefaces theme override custom Liferay theme.

Hi Neil, I will try this, thanks.

[Christophe Noel, geändert vor 10 Jahren.]

I'm facing the same issue as Jack: liferay default theme overrides Primefaces CSS, resulting in unexpected styles (size, colors, padding, etc.).
The issue mentioned by Neil is as opposite about Primefaces css overriding Liferay default theme.

I haven't found solution yet, excepted one by one, overriding each style modified by classic theme. Note that when removing the aui style to the html body, all primefaces styles become correctly displayed.

What is the recommand way to solve this ? Is there any CSS reset technique which could be used in this case ?

Thanks for you support.

[Christophe Noel, geändert vor 10 Jahren.]

The following code is not very optimal, but it could help people for facing this issues:
Note you have to use the styleClass="primefacesStyles" in your main PF component to apply these styles.

.ui-widget {
	font-size: 12px !important;
}
/*primefaces styles ovveride liferay theme defaults*/
.primefacesStyles {
	font-size: 12px !important;
	font-color: black !important;
	line-height: normal !important;
}

.primefacesStyles input {
	line-height: normal !important;
}

.primefacesStyles ul,.primefacesStyles textarea,.primefacesStyles textarea
	{
	padding: 0px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
}

.primefacesStyles a {
	color: black !important;
}

.primefacesStyles .ui-inputfield ,.primefacesStyles  .ui-widget-content .ui-inputfield,
	.primefacesStyles  .ui-widget-header .ui-inputfield { background:#ffffff!important;
	-moz-box-shadow: inset 0 2px 2px #8f8f8f !important;
	-webkit-box-shadow: inset 0 2px 2px #8f8f8f !important;
	box-shadow: inset 0 2px 2px #8f8f8f !important;
	color: #222222 !important;
	margin-bottom:0px!important;

}

.primefacesStyles {
 input {
 height:15px!important;
 }
}

.primefacesStyles  .ui-corner-all {
-moz-border-radius: 6px !important;
-webkit-border-radius: 6px!important;
}

[Christophe Noel, geändert vor 9 Jahren.]

Hi,

As alternative workaround, I generally simply add "!important" property to any Primefaces rules which is overriden. I still haven't found any other approach.

Christophe.

[Christophe Noel, geändert vor 9 Jahren.]

Please see an illustration of the issue: Primefaces (any version) with Liferay Classic Theme (= aui styles) make it impossible to display correctly.

[Neil Griffin, geändert vor 9 Jahren.]

Hi Christophe,

Have you considered developing a custom Liferay theme that includes many (but not all) of the CSS features from the out-of-the-box Liferay Classic theme?

Kind Regards,

Neil

[Christophe Noel, geändert vor 9 Jahren.]

Hi Neil,

I will continue using that approach but I must admit that CSS & themes are not my best skills.
Primefaces being largely used, I expected some other people solved that issue.

Using the new theming approach, it seems I can hardly remove aui class without breaking lot of features (see https://www.liferay.com/community/forums/-/message_boards/message/38037262)
Thanks,
Christophe.

[Jack Tsai, geändert vor 10 Jahren.]

Oliver Bayer:

Hi,

it seems that some css is overriding the primefaces styles. You can try the following to solve this issue. Use firebug or some other browser tool to inspect which style is messing up the primefaces style. Now you can override the wrong section by appending "!important;" e.g. "p { background-color: red !important; } to your rule.

HTH Oli

Hi, I have tried this way, but the same css overrode the styles i appended. And there are many components need to be fixed, so i'll keep finding other ways, thanks, Oliver.