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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Tree width depending on content #46165

    Dundee
    Participant

    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…???

    Tree width depending on content #46166

    Dundee
    Participant

    Just wanna add information about that i want to increase width on expand and decreve on collapse too..

    Tree width depending on content #46172

    Dimitar
    Participant

    Hello Dundee,

    Unfortunately, this functionality is not supported by jqxTree.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Tree width depending on content #46185

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.