jQuery UI Widgets › Forums › Navigation › Tree › Label display bug Firefox
This topic contains 5 replies, has 2 voices, and was last updated by patrick 9 years, 3 months ago.
Viewing 6 posts - 1 through 6 (of 6 total)
-
Author
-
Seems to be a bug in Firefox where the label disappears, then reappears when a branch is collapsed or expanded. I have included a simple example below, which works fine in Chrome & IE. <!DOCTYPE html> <html lang="en" ng-app="test"> <head> <meta charset="utf-8" /> <link href="jqx.base.css" rel="stylesheet" /> <link href="jqx.arctic.css" rel="stylesheet" /> <script src="angular.min.js" type="text/javascript"></script> <script src="jquery-1.11.1.min.js" type="application/javascript"></script> <script src="jqx-all.js" type="text/javascript"></script> </head> <body ng-controller="MainCtrl as main"> <div style="width:400px; height:500px;"> <jqx-panel jqx-settings="main.settings.panel" jqx-instance="main.panel"> <jqx-tree jqx-settings="main.settings.tree" jqx-instance="main.tree"> <ul> <li id="st_Solution" item-expanded='true'> <img src="images/folder.png" /> Solution </ul><ul> <li> <img src="images/folder.png" /> S88 Modules <ul> <li id="st_S88_Diagrams"><img src="images/folder.png" /> Diagrams</ul></li> <li> <img src="images/folder.png" /> Physical <ul> <li id="st_S88_ControlModules"><img src="images/folder.png" /> Control Modules</ul></li> <li id="st_S88_EquipmentModules"><img src="images/folder.png" /> Equipment Modules <li id="st_S88_Units"><img src="images/folder.png" /> Units <li id="st_S88_ProcessCells"><img src="images/folder.png" /> Process Cells </ul> <li> <img src="images/folder.png" /> Procedural <ul> <li id="st_S88_Procedures"><img src="images/folder.png" /> Procedures</ul></li> <li id="st_S88_UnitProcedures"><img src="images/folder.png" /> Unit Procedures <li id="st_S88_UnitOperations"><img src="images/folder.png" /> Unit Operations <li id="st_S88_Phases"><img src="images/folder.png" /> Phases <li id="st_S88_Formulas"><img src="images/folder.png" /> Formulas <li> <img src="images/folder.png" /> S95 Modules <ul> <li id="st_S95_Diagrams"><img src="images/folder.png" /> Diagrams</ul></li> <li> <img src="images/folder.png" /> Physical <ul> <li id="st_S95_ControlModules"><img src="images/folder.png" /> Control Modules</ul></li> <li id="st_S95_WorkCentres"><img src="images/folder.png" /> Work Centres <li id="st_S95_Rooms"><img src="images/folder.png" /> Rooms <li> <img src="images/folder.png" /> Procedural <ul> <li id="st_S95_Procedures"><img src="images/folder.png" /> Procedures</ul></li> <li id="st_S95_UnitProcedures"><img src="images/folder.png" /> Unit Procedures <li id="st_S95_UnitOperations"><img src="images/folder.png" /> Unit Operations <li id="st_S95_Phases"><img src="images/folder.png" /> Phases <li id="st_S95_Formulas"><img src="images/folder.png" /> Formulas <li id="st_S95_MaterialBills"><img src="images/folder.png" /> Material Bills <li id="st_None_TransactionModules"><img src="images/folder.png" /> Transaction Modules <li id="st_None_Campaigns"><img src="images/folder.png" /> Campaigns <li id="st_None_Scripts"><img src="images/folder.png" /> Interpreter Scripts <li id="st_None_Macro"><img src="images/folder.png" /> Macro Recordings </jqx-tree> </jqx-panel> </div> <script> angular .module('test', ['jqwidgets']) .controller('MainCtrl', function(){ var main = this; main.panel = null; main.tree = null; main.settings = { panel: { theme: 'arctic', width: '100%', height: '100%' }, tree: { theme: 'arctic', width: '100%', height: '100%', allowDrag: true, allowDrop: false } }; }); </script> </body> </html>Hello patrick.fay,
Please repost your code but remember to format it by selecting it and clicking the
codebutton in the toolbar. And do you experience this issue with our AngularJS jqxTree demo?Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi patrick.fay,
Your tree HTML seems to be incorrect, with most li elements missing their closing tags. We tested your example with our own tree structure in Firefox, but could not reproduce the issue:
<!DOCTYPE html> <html lang="en" ng-app="test"> <head> <meta charset="utf-8" /> <link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet" /> <link href="../../jqwidgets/styles/jqx.arctic.css" rel="stylesheet" /> <script src="../../scripts/angular.min.js" type="text/javascript"></script> <script src="../../scripts/jquery-1.11.1.min.js" type="application/javascript"></script> <script src="../../jqwidgets/jqx-all.js" type="text/javascript"></script> </head> <body ng-controller="MainCtrl as main"> <div style="width: 400px; height: 500px;"> <jqx-panel jqx-settings="main.settings.panel" jqx-instance="main.panel"> <jqx-tree jqx-settings="main.settings.tree" jqx-instance="main.tree"> <ul> <li id='home'>Home</li> <li item-expanded='true'>Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li>Manufacturing</li> <li>Solutions <ul> <li>Consumer photo and video</li> <li>Mobile</li> <li>Rich Internet applications</li> <li>Technical communication</li> <li>Training and eLearning</li> <li>Web conferencing</li> </ul> </li> <li>All industries and solutions</li> </ul> </li> <li>Products <ul> <li>PC products</li> <li>Mobile products</li> <li>All products</li> </ul> </li> <li>Support <ul> <li>Support home</li> <li>Customer Service</li> <li>Knowledge base</li> <li>Books</li> <li>Training and certification</li> <li>Support programs</li> <li>Forums</li> <li>Documentation</li> <li>Updates</li> </ul> </li> <li>Communities <ul> <li>Designers</li> <li>Developers</li> <li>Educators and students</li> <li>Partners</li> <li>By resource <ul> <li>Labs</li> <li>TV</li> <li>Forums</li> <li>Exchange</li> <li>Blogs</li> <li>Experience Design</li> </ul> </li> </ul> </li> <li>Company <ul> <li>About Us</li> <li>Press</li> <li>Investor Relations</li> <li>Corporate Affairs</li> <li>Careers</li> <li>Showcase</li> <li>Events</li> <li>Contact Us</li> <li>Become an affiliate</li> </ul> </li> </ul> </jqx-tree> </jqx-panel> </div> <script> angular .module('test', ['jqwidgets']) .controller('MainCtrl', function () { var main = this; main.panel = null; main.tree = null; main.settings = { panel: { theme: 'arctic', width: '100%', height: '100%' }, tree: { theme: 'arctic', width: '100%', height: '100%', allowDrag: true, allowDrop: false } }; }); </script> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Sorry the closing tags where accidentally removed when I removed references to images. I have created a plunk @ http://plnkr.co/edit/99o3Hek4OdXYx8NZvlHd. Please try this in FireFox (38.0.5) to see the issue.
Regards,
PatrickHi Patrick,
We were able to reproduce this issue. As a solution, you can remove the jqx-panel (the tree itslef provides the scroll functionality) or set animationShowDuration and animationHideDuration to 0.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar, it works perfectly now.
Regards,
Patrick -
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.