掲示板

Primefaces portlet style problem

10年前 に 蔡 孟佑 によって更新されました。

Primefaces portlet style problem

New Member 投稿: 3 参加年月日: 13/09/30 最新の投稿
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.
10年前 に Oliver Bayer によって更新されました。

RE: Primefaces portlet style problem

Liferay Master 投稿: 894 参加年月日: 09/02/18 最新の投稿
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
thumbnail
10年前 に Neil Griffin によって更新されました。

RE: Primefaces portlet style problem

Liferay Legend 投稿: 2655 参加年月日: 05/07/27 最新の投稿
I would recommend that you read this other thread titled Primefaces theme override custom Liferay theme.
10年前 に Jack Tsai によって更新されました。

RE: Primefaces portlet style problem

New Member 投稿: 3 参加年月日: 13/09/30 最新の投稿
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.
10年前 に Christophe Noel によって更新されました。

RE: Primefaces portlet style problem

Junior Member 投稿: 99 参加年月日: 12/09/28 最新の投稿
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.
10年前 に Christophe Noel によって更新されました。

RE: Primefaces portlet style problem

Junior Member 投稿: 99 参加年月日: 12/09/28 最新の投稿
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;
}

9年前 に Christophe Noel によって更新されました。

RE: Primefaces portlet style problem

Junior Member 投稿: 99 参加年月日: 12/09/28 最新の投稿
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.
9年前 に Christophe Noel によって更新されました。

RE: Primefaces portlet style problem

Junior Member 投稿: 99 参加年月日: 12/09/28 最新の投稿
Please see an illustration of the issue: Primefaces (any version) with Liferay Classic Theme (= aui styles) make it impossible to display correctly.
thumbnail
9年前 に Neil Griffin によって更新されました。

RE: Primefaces portlet style problem

Liferay Legend 投稿: 2655 参加年月日: 05/07/27 最新の投稿
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
9年前 に Christophe Noel によって更新されました。

RE: Primefaces portlet style problem

Junior Member 投稿: 99 参加年月日: 12/09/28 最新の投稿
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. emoticon

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.
10年前 に Jack Tsai によって更新されました。

RE: Primefaces portlet style problem

New Member 投稿: 3 参加年月日: 13/09/30 最新の投稿
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.