jQuery UI Widgets Forums Navigation Tree Tree sizing

Tagged: , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 11 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Tree sizing Posts
  • Tree sizing #23332

    arikbd
    Participant

    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 panel

    Tree sizing #23337

    Peter Stoev
    Keymaster

    Hi,

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tree sizing #23348

    arikbd
    Participant

    Peter,

    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

    Tree sizing #23350

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Tree sizing #23351

    arikbd
    Participant

    Peter,

    can I use something like 50%-75px for the height?

    Arik

    Tree sizing #23352

    Peter Stoev
    Keymaster

    Hi,

    No, that is not possible.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.