cssinternet-explorerkendo-uiie8-compatibility-modekendo-panelbar

Kendo UI in IE Compatability Mode - Scroll a panel bar

In the process of updating a website, we are required to support IE in compatibility mode so as to not break existing functionality.

There is a new side menu, which uses Kendo UI's PanelBar. However if the content overflows and we have to scroll, the kendo controls do not scroll correctly - the items float on top in a fixed position.

IE Compatibility Mode vs IE Edge: (please ignore size difference)

IE Compatibility Mode Issue IE Edge correct

I've created a fiddle here to replicate:

<!DOCTYPE html>
<html class="k-webkit k-webkit40">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Kendo UI - jsFiddle demo by paulcoghill</title>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
        <style type="text/css"></style>
        <link rel="stylesheet" type="text/css" href="/css/normalize.css">
        <link rel="stylesheet" type="text/css" href="/css/result-light.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.blueopal.min.css">
        <script type="text/javascript" src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
        <style type="text/css">
            h1{
            margin-bottom: 30px;
            }
            #container{
            height: 200px;
            width: 200px;
            padding 5px;
            background-color: red;
            overflow: auto;
            }
        </style>
        <script type="text/javascript">//<![CDATA[ 
            $(window).load(function(){
            $(document).ready(function() {
                $("#panelbar").kendoPanelBar({
                    expandMode: "single"
                });
            });
            });//]]>  

        </script>
    </head>
    <body hola-ext-player="1">
        <div id="container">
            <h1>Header</h1>
            <ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu">
                <li class="k-item k-state-default k-first" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
                <li class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
            </ul>
            <div>
            </div>
        </div>
    </body>
</html>

http://jsfiddle.net/paulcoghill/k4gqq2dk/7/

You can view the result in compatibility mode to test: http://jsfiddle.net/paulcoghill/k4gqq2dk/7/embedded/result/

Can anyone find a workaround or resolve this?

I've tried messing about with difference overflows and z-indexes, updating kendo, but I can't figure out what's going on.

Solution

  • Paul, try adding "position: relative;" to the container. Found this on another question: IE7 CSS Scrolling Div Bug