AngularJS directive for horizontal and vertical divided boxes
0 people use it


ui-divided-box for angularJS


ui-divided-box is a set of AngularJS directives that mimic the Flex/Actionscript DividedBox containers. A divided box lays out its children horizontally or vertically, inserting a draggable divider between each child. Dragging a divider increases or decreases the size of the element to the left in a horizontal divided box, or above in a vertical divided box, and correspondingly takes away or adds to the last element in the list.


creates a horizontal box of four DIVs each separated by a vertical divider. Drag the divider to resize the boxes.

You can find examples on the demo page.


The full jQuery is required.



Horizontal boxes appear as


Vertical boxes appear as


Attributes for divided box elements

  • orientation: for <ui-divided-box> only. Indicates layout direction. If first character is 'h' then the layout is horizontal, otherwise it is vertical.
  • divider-width: the width of the divider. Defaults to 3 pixels.
  • divider-color: the color of the divider. Defaults to gray.
  • divider-class: CSS class to apply to the divider. Defaults to null.

Attributes for child elements of divided boxes

  • min: minimum size of this child, in pixels, defaults to 10
  • max: maximum size of this child, in pixels

    Use CSS to set the initial size of the child element.


  • include ui-divided-box.js
  • add module to angular


Known Issues

There is an error in calculating the width or height of the last element. Depending on the width of the outer container, the last element is off between 0 and 3 pixels.

Future Development

Rather than using a simple background color for the draggable divider, use a repeatable image, or vectors on a canvas.

comments powered by Disqus
This page was last updated over 3 years ago.