Prime Community Forum

Posted: **11 Dec 2018, 16:28**

Hi,

I'm having a problem at the time of displaying the icons in the "tree" component. See the problem below:

Bootstrap v4

Bootstrap v3

Code: Select all

<p:tree id="menusAtivos" value="#{menusBean.menusAtivos}" var="menusAtivos" dynamic="true" selectionMode="single" droppable="true" dragdropScope="menusAtivos" animate="true" style="border: none">
	<p:ajax event="select" update="frmMenusUsuarioPermissao" listener="#{menusBean.onNodeSelect}" />
	<p:ajax event="dragdrop" listener="#{menusBean.onDragDropMenusUsuario}" />
	<p:treeNode expandedIcon="ui-icon ui-icon-folder-open" collapsedIcon="ui-icon ui-icon-folder-collapsed">
    		<h:outputText value="#{msg[menusAtivos.nome]}" />
	</p:treeNode>
	<p:treeNode type="dashboard" expandedIcon="fa fa-home" collapsedIcon="fa fa-home">
    		<h:outputText value="#{msg[menusAtivos.nome]}" />
	</p:treeNode>
	<p:treeNode type="twebperfil" expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder">
    		<h:outputText value="#{menusAtivos.nome}" />
	</p:treeNode>
	<p:treeNode type="twebmenu" expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder">
    		<h:outputText value="#{msg[menusAtivos.nome]}" />
	</p:treeNode>
</p:tree

How to solve this problem?

Posted: **12 Dec 2018, 08:32**

Thanks a lot for the sample code and screenshots. Fixed for the next version now. Please remove the comment in _icons.scss file. Then, you can provide new theme.css file using Sass command.

Best Regards,

Posted: **12 Dec 2018, 13:48**

Thank you...

I made the changes and uncommented the lines of the _icons.scss file in the "theme" folder and the files were recompiled, but still continue with the same problem.

I use NetBeans and the settings are:

and

Posted: **12 Dec 2018, 14:02**

Thanks a lot for the update! Could you please check the following line in your provided theme.css under primefaces-avalon-amber folder;

Code: Select all

...
//line 437
.ui-icon-folder-collapsed {
  background: none;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-indent: 0px !important;
  text-align: center; }
  .ui-icon-folder-collapsed:before {
    content: " "; }

.ui-icon-folder-open {
  background: none;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-indent: 0px !important;
  text-align: center; }
  .ui-icon-folder-open:before {
    content: " "; }
...

Posted: **12 Dec 2018, 14:17**

Of course yes! See below...

Code: Select all

.ui-icon-folder-collapsed {
  background: none;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-indent: 0px !important;
  text-align: center; }
  .ui-icon-folder-collapsed:before {
    content: " "; }

.ui-icon-folder-open {
  background: none;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-indent: 0px !important;
  text-align: center; }
  .ui-icon-folder-open:before {
    content: " "; }

Posted: **12 Dec 2018, 14:25**

It's not just a problem in the "tree" component. There are also problems in the "dialog" component. See the example below:

bootstrap v3

bootstrap v4

Posted: **12 Dec 2018, 14:32**

Interesting! I still couldn't replicate it. Could you please check it in browser? Please see;

Full image; https://ibb.co/VJqx9Cx

Also, my test theme is primefaces-avalon-blue

Posted: **12 Dec 2018, 14:42**

I think I found the problem !!

I think the problem only occurs when I use the theme and the blue layout ... can you test this?

Posted: **12 Dec 2018, 15:00**

Unfortunately, I still couldn't replicate it.

The links in head tag(the inspector of browser)

Code: Select all

<link type="text/css" rel="stylesheet" href="/avalon/javax.faces.resource/theme.css.xhtml?ln=primefaces-avalon-blue">
...
<link type="text/css" rel="stylesheet" href="/avalon/javax.faces.resource/css/layout-blue.css.xhtml?ln=avalon-layout">

Posted: **12 Dec 2018, 15:09**

aragorn wrote: ↑
12 Dec 2018, 14:32
Interesting! I still couldn't replicate it. Could you please check it in browser? Please see;

Full image; https://ibb.co/VJqx9Cx

Also, my test theme is primefaces-avalon-blue

Tested using bootstrap 3?

bootstrap 3 blue

bootstrap 3 cyan

Prime Community Forum

problem with bootstrap v3 x bootstrap v4.

problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.

Re: problem with bootstrap v3 x bootstrap v4.