jQuery UI Widgets › Forums › Navigation › Tree › Tree sizing
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 9 months ago.
-
AuthorTree sizing Posts
-
Hello,
I’m trying to create a tree control that will take the full height of the page, I have couple of div elements on the same page, the divs are configuration panels that are displayed or hidden and I need the tree to re-size if the panels are open or closed.
Attached please see a demo code I’m using
Thanks,
Arik
Check tree
var objectsTreeItems = [ { label: “Objects”, expanded: true,
“items”: [
{ “label”: “Group 1”, “items”: [{ “value”: “obj 1.1”, “label” : “obj 1.1” } ] },
{ “label”: “Group 2”, “items”: [{ “value”: “obj 2.1”, “label” : “obj 2.1” } ] },
{ “label”: “Group 3”, “items”: [{ “value”: “obj 3.1”, “label” : “obj 3.1” } ] },
{ “label”: “Other”, “items”: [{ “value”: “obj x.1”, “label” : “obj x.1” }, { “value”: “obj x.2”, “label” : “obj x.2” } ] }
]} ];jQuery(document).ready(function() {
var theme = getDemoTheme();
$(‘#testTree’).jqxTree({ source: objectsTreeItems, theme: theme, height: ‘100%’, width: ‘100%’ });
});Test upper panelHi,
If you want the Tree’s height to be automatic, then you should not set the ‘height’ property. By doing that, jqxTree’s height will depend only on the items that are visible in the tree.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPeter,
Thanks but I do not understand how to do it.
If I remove the height attribute from the jqxTree method I still get the same problem, it seems that the size of the tree control is the size of the entire frame, if I remove the height attribute then the tree does not re-size when I re-size the window.
I want the control to re-size to the full height left in the frame.
B.T.W I tried it on both Chrome and IE 10
Thanks,Arik
Hi,
Here’s a sample which shows how to make the Tree to be automatically resized when its container is resized. In the sample, the container of the Tree is the Document’s BODY tag.
<!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.1.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"> $(document).ready(function () { var theme = getDemoTheme(); // Create jqxTree $('#jqxTree').jqxTree({ height: '50%', width: '50%', theme: theme }); }); </script> <style> html, body { width: 100%; height: 100%; overflow: hidden; } </style></head><body class='default'> <div id='jqxTree'> <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> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPeter,
can I use something like 50%-75px for the height?
Arik
-
AuthorPosts
You must be logged in to reply to this topic.