jQuery UI Widgets › Forums › Navigation › Tree › Tree width depending on content
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 11 years, 2 months ago.
-
Author
-
is there a way to have kind of auto-width base on content of the tree?
In our case, we have hierarchy of items with many sublevel. So when we expand many sub level..the text displayed in the tree are not fully display dueto the tree border or width limit.
Here example
<li></li> <li> <ul> <li> <ul> <li> Sublevel with a long text label.....etc </li> <li></li> </ul> </li> <li></li> <li></li> </ul> </li> <li></li> <li></li>
How could i adjust with…???
Just wanna add information about that i want to increase width on expand and decreve on collapse too..
Hello Dundee,
Unfortunately, this functionality is not supported by jqxTree.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/UPDATE: There is actually a way to achieve this functionality – by not setting the width and height properties. Here is an example, based on the demo Checkboxes:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxTree var theme = ""; // create jqxTree $('#jqxTree').jqxTree({ hasThreeStates: true, checkboxes: true, theme: theme }); $('#jqxCheckBox').jqxCheckBox({ width: '200px', height: '25px', checked: true, theme: theme }); $('#jqxCheckBox').on('change', function (event) { var checked = event.args.checked; $('#jqxTree').jqxTree({ hasThreeStates: checked }); }); $("#jqxTree").jqxTree('selectItem', $("#home")[0]); }); </script> </head> <body class='default'> <div id='jqxWidget'> <div style='float: left;'> <div id='jqxTree' style='float: left; margin-left: 20px;'> <ul> <li id='home'>Home</li> <li item-checked='true' item-expanded='true'>Solutions <ul> <li>Education</li> <li>Financial services</li> <li>Government</li> <li item-checked='false'>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> </div> <div style='margin-left: 60px; float: left;'> <div style='margin-top: 10px;'> <div id='jqxCheckBox'> Three Check States</div> </div> </div> </div> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.