Page 1 of 2

problem with bootstrap v3 x bootstrap v4.

Posted: 11 Dec 2018, 16:28
by marcelocaser
Hi,

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

Bootstrap v4
Image

Bootstrap v3
Image

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?

Re: problem with bootstrap v3 x bootstrap v4.

Posted: 12 Dec 2018, 08:32
by aragorn
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,

Re: problem with bootstrap v3 x bootstrap v4.

Posted: 12 Dec 2018, 13:48
by marcelocaser
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:

Image

and

Image

Re: problem with bootstrap v3 x bootstrap v4.

Posted: 12 Dec 2018, 14:02
by aragorn
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: " "; }
...

Re: problem with bootstrap v3 x bootstrap v4.

Posted: 12 Dec 2018, 14:17
by marcelocaser
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: " "; }
        
Image

Re: problem with bootstrap v3 x bootstrap v4.

Posted: 12 Dec 2018, 14:25
by marcelocaser
It's not just a problem in the "tree" component. There are also problems in the "dialog" component. See the example below:

bootstrap v3

Image

bootstrap v4

Image

Re: problem with bootstrap v3 x bootstrap v4.

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

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

Also, my test theme is primefaces-avalon-blue

Re: problem with bootstrap v3 x bootstrap v4.

Posted: 12 Dec 2018, 14:42
by marcelocaser
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?

Re: problem with bootstrap v3 x bootstrap v4.

Posted: 12 Dec 2018, 15:00
by aragorn
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">

Re: problem with bootstrap v3 x bootstrap v4.

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

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

Also, my test theme is primefaces-avalon-blue
Tested using bootstrap 3?

bootstrap 3 blue

Image

bootstrap 3 cyan

Image