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
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?
Re: problem with bootstrap v3 x bootstrap v4.
Posted: 12 Dec 2018, 08:32
by mert.sincan
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:
and
Re: problem with bootstrap v3 x bootstrap v4.
Posted: 12 Dec 2018, 14:02
by mert.sincan
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: " "; }
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
bootstrap v4
Re: problem with bootstrap v3 x bootstrap v4.
Posted: 12 Dec 2018, 14:32
by mert.sincan
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
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 mert.sincan
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;
Full image;
https://ibb.co/VJqx9Cx
Also, my test theme is primefaces-avalon-blue
Tested using bootstrap 3?
bootstrap 3 blue
bootstrap 3 cyan