Kendo UI in IE Compatability Mode - Scroll a panel bar
Question
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)
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.
1 answers
solution1
1 ACCPTED 2015-02-04 19:05:34
Paul, try adding "position: relative;" to the container. Found this on another question: IE7 CSS Scrolling Div Bug
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.