AngularJS Split Pane directive version 1.0.0

Version 1.0.0 of the angular-split-pane directive now supports IE 8.

A bug with extra left margin appearing in fixed-top split-pane has also been fixed.

Remember to use attributes when setting up directives in IE 8!

Here is a complete example:

<!DOCTYPE html>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Fixed left</title>
		<link rel="stylesheet" href="../bower_components/split-pane/split-pane.css" />
		<script src="../bower_components/jquery/dist/jquery.min.js"></script>
		<script src="../bower_components/angular/angular.js"></script>
		<script src="../bower_components/split-pane/split-pane.js"></script>
		<script src="../angular-split-pane.js"></script>
		<style type="text/css">
			html, body {
				height: 100%;
				min-height: 100%;
				margin: 0;
				padding: 0;
			/* The styling bolow is very simple. You can style things your own way. */
			body {
				box-sizing: border-box;
				background: #aaa;
				padding: 5px;
			.split-pane-divider {
				background: #aaa;
			.split-pane-component {
				background: #fff;
	<body data-ng-app="example">
		<div data-split-pane>
			<div data-split-pane-component data-width="20em">left</div>
			<div data-split-pane-divider data-width="5px"></div>
			<div data-split-pane-component>right</div>
			angular.module('example', ['shagstrom.angular-split-pane']);

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>