jQWidgets Forums

Tagged: javascript splitter, jquery splitter, splitter

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

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

Author

Tree in splitter, no scrollbar Posts

June 30, 2013 at 9:38 am Tree in splitter, no scrollbar #24209

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>

June 30, 2013 at 12:40 pm 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/

Author

Posts

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

You must be logged in to reply to this topic.