This is a migrated thread and some comments may be shown as answers.

Splitter applying additional styling to some elements in IE

1 Answer 150 Views

Splitter

This is a migrated thread and some comments may be shown as answers.

James asked on 28 Jul 2015, 11:44 PM

splitter(chrome).jpg

splitter(ie).jpg

I've noticed that elements (buttons, select boxes) inside the Kendo Splitter have large borders or other styling changes in IE, but not in Chrome.

I couldn't find the cause for this by inspecting the CSS.

How can I make my elements inside the Splitter look the same in both IE and Chrome?

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/splitter/index">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css" />

<script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example" style="height:300px; width: 800px">

<div id="outsideSplitter">

<input type="button" value="A Button"/>

<input type="checkbox"/>

<select style="width:120px"></select>

</div>

<div id="splitter" style="height: 100%; width: 100%;">

<div id="left-pane">

<div class="pane-content">

<div>

<input type="button" value="A Button"/>

<input type="checkbox"/>

<select style="width:120px"></select>

</div>

<div id="right-pane">

<div class="pane-content">

<div>

<input type="button" value="A Button"/>

<input type="checkbox"/>

<select style="width:120px"></select>

</div>

<script>

$(document).ready(function() {

$("#splitter").kendoSplitter({

panes: { collapsible: true }

});

</script>

</body>

</html>

Splitter applying additional styling to some elements in IE

1 Answer, 1 is accepted