jQuery UI Widgets Forums Layouts Splitter Not compatible on IE when using Splitter+Navigationbar+ListBox

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

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

  • yonysun
    Member

    This is a demo written by me,and it’s made with Splitter+Navigationbar+ListBox.
    It works fine on the FireFox browser and the Chrome browser also,but it will be unnormal when running on the IE browser.
    The IE browser doesn’t reports errors
    I have taken a long time to find the cause,but nothing was found.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>cheers demo</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- Load Vendor -->
    <script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="vendor/json2.js"></script>
    <script type="text/javascript" src="vendor/knockout-2.2.1.debug.js"></script>
    <!-- Load jQwidgets Source -->
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.darkblue.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxknockout.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script><!-- layout -->
    <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script><!-- tab -->
    <script type="text/javascript" src="jqwidgets/jqxnavigationbar.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.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>
    $(document).ready(function () {
    var theme = 'darkblue';
    $('#splitter').jqxSplitter({ width: '100%', theme: theme, panels: [{ size: 200 }] });
    $("#tabswidget").jqxTabs({ theme: theme,closeButtonSize:20, height: '100%', width: '100%' });
    $("#jqxNavigationBar").jqxNavigationBar({ width: 200, expandMode: 'multiple', expandedIndexes: [], theme: theme });
    });
    </script>
    </head>
    <body class='default' style="margin:0px;padding:0px;overflow:hidden">
    <div id="splitContainer">
    <div>
    <div id="splitter">
    <div style="width:300px;" id="menuList">
    <div id="jqxNavigationBar">
    <div>
    <div style='margin-top: 2px;'>
    <div style='float: left;'>
    <img alt='Mail' src='images/contactsIcon.png' />
    </div>
    <div style='margin-left: 4px; float: left;'>
    Contacts
    </div>
    </div>
    </div>
    <div>
    <ul>
    <li><a href='#'>Business Cards</a></li>
    <li><a href='#'>Address Cards</a></li>
    <li><a href='#'>Detailed Address Cards</a></li>
    <li><a href='#'>Phone List</a></li>
    </ul>
    </div>
    <div>
    <div style='margin-top: 2px;'>
    <div style='float: left;'>
    <img alt='Mail' src='images/tasksIcon.png' />
    </div>
    <div style='margin-left: 4px; float: left;'>
    Tasks
    </div>
    </div>
    </div>
    <div>
    <ul>
    <li><a href='#'>Simple List</a></li>
    <li><a href='#'>Detailed List</a></li>
    <li><a href='#'>Active Tasks</a></li>
    <li><a href='#'>Phone List</a></li>
    </ul>
    </div>
    <div>
    <div style='margin-top: 2px;'>
    <div style='float: left;'>
    <img alt='Mail' src='images/notesIcon.png' />
    </div>
    <div style='margin-left: 4px; float: left;'>
    Notes
    </div>
    </div>
    </div>
    <div>
    <ul>
    <li><a href='#'>Icons</a></li>
    <li><a href='#'>Notes List</a></li>
    <li><a href='#'>Last Seven Days</a></li>
    </ul>
    </div>
    </div>
    </div>
    <div>
    <div class="jqx-hideborder jqx-hidescrollbars" id="tabswidget">
    <ul>
    <li style="margin-left: 10px;">index</li>
    </ul>
    <div>Content 1</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Peter Stoev
    Keymaster

    Hi,

    I checked the HTML markup in the posted code and found out that it is not written as expected. You should not initialize widgets from Split Panels or change Layout Properties such as Width or Height of Split Panels as these are managed by the Splitter. Widgets or any other HTML Content should be within the Split panels. An example of using Splitter with other widgets is available here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/defaultfunctionality.htm?web

    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.