jQuery UI Widgets Forums Layouts Splitter Tree in splitter, no scrollbar

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 6 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Tree in splitter, no scrollbar #24209

    nn4n4ss
    Member

    Hi. I’m trying to put a tree element inside the splitter. Everything is good, except the scroll bar. When I load the page and start opening tree nodes, the scroolbar of tree doesn’t appear on side, even if the content doesn’t fit to the page, still I can scroll the content, but I don’t see the scrollbar. IF I resize the splitter, or the window, the scrollbar appears. Where could be the problem?

    <!DOCTYPE html>
    <html>
    <head>
    <meta content="text/html; utf-8"/>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.office.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" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = 'office';
    // Create jqxTree
    $('#splitter').jqxSplitter({ width: '98%', height: '99%', theme: theme, panels: [{ size: '20%', min: 250 }]});
    var tree = $('#jqxTree');
    var source = null;
    $.ajax({
    async: false,
    url: '../ip/ip_action.php?do=getTree',
    success: function (data, status, xhr) {
    source = jQuery.parseJSON(data);
    }
    });
    tree.jqxTree({ source: source, theme: theme, height: '100%', width: '100%' });
    tree.bind('expand', function (event) {
    var label = tree.jqxTree('getItem', event.args.element).label;
    var $element = $(event.args.element);
    var loader = false;
    var loaderItem = null;
    var children = $element.find('ul:first').children();
    $.each(children, function () {
    var item = tree.jqxTree('getItem', this);
    if (item && item.label == 'Gaunama...') {
    loaderItem = item;
    loader = true;
    return false
    };
    });
    if (loader) {
    $.ajax({
    url: '../ip/ip_action.php?do=getTree',
    data: {id: event.args.element.id},
    success: function (data, status, xhr) {
    var items = jQuery.parseJSON(data);
    tree.jqxTree('addTo', items, $element[0]);
    tree.jqxTree('removeItem', loaderItem.element);
    }
    });
    }
    });
    });
    </script>
    <style type="text/css">
    html, body
    {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    }
    </style>
    </head>
    <body class='default'>
    <div id='splitter' style="margin-left: auto; margin-right: auto;">
    <div id='jqxTree'></div>
    <div id='content'></div>
    </div>
    </body>
    </html>

    • This topic was modified 6 years, 9 months ago by  nn4n4ss.
    • This topic was modified 6 years, 9 months ago by  nn4n4ss.
    • This topic was modified 6 years, 9 months ago by  nn4n4ss.
    • This topic was modified 6 years, 9 months ago by  nn4n4ss.
    Tree in splitter, no scrollbar #24214

    Peter Stoev
    Keymaster

    Hi,

    The HTML Structure of the provided code is incorrect. You should have a DIV tag for the Splitter, 2 nested DIV tags for its Panels and if you want to put any content inside the panels, then should add it in the Panels i.e to put a jqxTree inside a Split Panel, add a new DIV tag.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.