Icon Problem in p:outputPanel (and all other .ui-widget)

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
tkernstock
Posts: 65
Joined: 29 Jun 2010, 14:39
Location: Vienna, Austria

25 Aug 2020, 16:44

Hi,

I would like to display a checkbox icon in a datatable cell. So I did the following:

Code: Select all

<p:column headerText="Administrator">
	<p:outputPanel layout="inline" styleClass="fa fa-check-square-o" />
	<i class="fa fa-check-square-o" />
	<p:outputPanel layout="inline" rendered="#{contact.isAdministrator()}" ><i class="fa fa-check-square-o" /></p:outputPanel>
	<p:outputPanel layout="inline" rendered="#{!contact.isAdministrator()}"><i class="fa fa-square-o" /></p:outputPanel> 
</p:column>
The solution with <i class="...." /> works fine, but using the styleClass with p:outputPanel shows just the hexcode. (See Screenshot)
https://www.dropbox.com/s/apgwqvemkv77l ... 1.jpg?dl=0

In case of the <i class=.... the used .css rulse look like this ->
https://www.dropbox.com/s/pktyar1pqliy9 ... 3.jpg?dl=0

In case of the outputPanel like this ->
https://www.dropbox.com/s/md4hh4513687y ... 2.jpg?dl=0

When I remove the font-family in the theme.css the icon is also displayed for outputPanel.

The problem is, that the font-family gets transpiled from the pandora-theme scss files and I wouldn't like to change them.
Of course I also could use the <i class...> solution, but since this problem occurs in all .ui--widgets, it would be great if you could fix the theme.

br
Thomas
Using: Eclipse 2020-06, Java 8, Primefaces 8, Omnifaces 3.6.1, Payara Server 5.201, Deltaspike 1.8.2

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

12 Sep 2020, 15:02

Hi,

Thanks a lot for the sample codes and screenshots! However, the first use is not valid. Icon classes cannot be added using styleClass. Components must support this in the core.

Code: Select all

<p:column headerText="Administrator">
  /*** InValid ***/
	<p:outputPanel layout="inline" styleClass="fa fa-check-square-o" /> 
  /**************/
  
  /*** Valid ***/
	<i class="fa fa-check-square-o" />
	<p:outputPanel layout="inline" ><i class="fa fa-check-square-o" /></p:outputPanel>
	<p:outputPanel layout="inline" ><i class="fa fa-square-o" /></p:outputPanel> 
  /*************/	
</p:column>
Best Regards,

Post Reply

Return to “Pandora - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests