jQuery UI Widgets Forums Navigation Tree How can I use width/height 100% size with jqxTree on fixed div..

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  kerusia 10 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • kerusia
    Member

    Hello, I make sample with jqxTree.
    I have a question.

    jqxTree was displayed when attach on fixed size div,
    but it don’t displayed on non-fixed div..

    I can’t use 100% size on jqxTree…

    Can you help me?

    next html is my sample codes:

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    * {margin:0; padding: 0}
    html, body{ margin:0; padding:0; overflow: hidden; }
    body {
    width: 100%;
    height: 100%;
    }
    #nm-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 97px;
    background: #fff;
    overflow: hidden;
    border-bottom: 3px #000 solid;
    }
    #nm-content-wrapper {}
    #nm-content-area {
    position: absolute;
    top: 100px;
    left: 0px;
    width: 100%;
    bottom: 100px;
    background: #d2da9c;
    overflow: hidden;
    }
    #nm-content-left {
    position: absolute;
    top: 100px;
    width: 15%;
    bottom: 250px;
    background: #e2e2e2;
    overflow: auto;
    }
    #nm-content-state {
    position: absolute;
    bottom: 100px;
    width: 15%;
    height: 147px;
    background: #fff;
    border-top: 3px #000 solid;
    overflow: auto;
    }
    #nm-content-right {
    position: absolute;
    top: 100px;
    left: 15%;
    width: 85%;
    bottom: 100px;
    background: #0f0;
    overflow: auto;
    }
    #nm-footer {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0px;
    height: 97px;
    background: #fff;
    overflow: auto;
    border-top: 3px #000 solid;
    }
    </style>
    <link rel="stylesheet" href="widget/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="widget/jqxcore.js"></script>
    <script type="text/javascript" src="widget/jqxbuttons.js"></script>
    <script type="text/javascript" src="widget/jqxpanel.js"></script>
    <script type="text/javascript" src="widget/jqxscrollbar.js"></script>
    <script type="text/javascript" src="widget/jqxcheckbox.js"></script>
    <script type="text/javascript" src="widget/jqxtree.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    // fixed : $('#jqxTree1').jqxTree({height: '500px', width: '300px'});
    $('#jqxTree1').jqxTree({height: '100%', width: '100%'});
    });
    </script>
    </head>
    <body>
    <div id="nm-header">
    <h1>header</h1>
    </div>
    <div id="nm-content-left">
    <div id="jqxTree1">
    <ul>
    <li item-selected="true" item-expanded="true">AA
    <ul>
    <li>BB
    <ul>
    <li>CC
    <ul>
    <li>DD</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    <li>EE</li>
    </ul>
    </div>
    </div>
    <div id="nm-content-state"></div>
    <div id="nm-content-right"></div>
    <div id="nm-footer">
    <h1>footer</h1>
    </div>
    </body>
    </html>

    • This topic was modified 10 years, 7 months ago by  kerusia.

    Minko
    Blocked

    Hello Kerusia,

    I tried to reproduce your scenario but in my case the jqxTree is with size 100% width and height.
    Please make sure you’re using the last version of jQWidgets. If you still have this issue after updating the widgets let us know.

    Best regards,
    Minko.

    jQWidgets Team
    http://jqwidgets.com/


    kerusia
    Member

    i tested as your answer.

    It’s work very well.

    Thanx 🙂

    • This reply was modified 10 years, 7 months ago by  kerusia.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.