Demo for directive ui-divided-box written in AngularJS

Drag the dividers to change the size of the child elements.

CSS being used in these examples.

	<style type="text/css">
	.myDivClass {
		background-color: rgba(66, 142, 66, .8);
	}
	.divBox {
		width:90%;
		margin: 0 auto;
		border:solid thin red;
		background-color:#aca;
	}
	.childElement {
		background-color: lightyellow;
		padding: 2px;
	}
	</style>




Vertical Container

	<ui-v-divided-box class="divBox"
		style="width: 90%; height:300px; border:solid thin red; background-color:#ffc; margin: 0 auto;"
		divider-width="3" divider-class='myDivClass'>
		<div class="childElement">one
		<div class="childElement" style="height: 200px; padding:2px; margin:4px; border:thick solid gold;" min="80">two
		<div>three
	</ui-v-divided-box>
one
two
three



Horizontal Container

	<ui-h-divided-box class="divBox" style="height:20px;">
		<div class="childElement" style="width: 200px" min="100" max="400">one</div>
		<div class="childElement" min="100" max="600">two</div>
		<div class="childElement" min="100">three</div>
		<div class="childElement" min="100">four</div>
	</ui-h-divided-box>
one
two
three
four
 

	<ui-h-divided-box class="divBox" style="height:20px;">
		<div class="childElement" style="width: 200px" min="100" max="400">one</div>
		<div class="childElement" min="100" max="600">two</div>
		<div class="childElement" style="border:solid thin blueviolet" min="100">three</div>
		<div class="childElement" min="100">FOUR</div>
		<div class="childElement" min="100">five</div>
		<div class="childElement" style="border:solid thick greenyellow" min="100">six</div>
		<div class="childElement" min="100">seven</div>
	</ui-h-divided-box>
one
two
three
FOUR
five
six
seven



Compound Container

	<ui-h-divided-box class="divBox" style="height:801px;"> 
		<ui-v-divided-box class="divBox" style="width:300px; height:100%; border:solid thick red;" min="300" max="900">
			<div class="childElement" min="40">one</div>
			<div class="childElement" min="40">two</div>
			<div class="childElement" min="40">three</div>
			<div class="childElement" min="20">four</div>
			<div class="childElement" style="border:solid thick green" min="80">five</div>
			<div class="childElement" min="80">six</div>
			<div class="childElement" min="80">eight</div>
			<div class="childElement" min="20">nine</div>
		</ui-v-divided-box> 
		<ui-v-divided-box class="divBox" style="height:100%;" min="200" id="innerRight">
			<div class="childElement" min="100" max="400">one</div>
			<div class="childElement" min="100" max="600">two</div>
			<div class="childElement" min="100">three</div>
			<div class="childElement" min="100">FOUR</div>
		</ui-v-divided-box>
	</ui-h-divided-box>
one
two
three
four
five
six
eight
nine
one
two
three
FOUR