Use the Container controller to observe and set an element's width and height based on it's parent or any other element.

Sometimes css alone is not enough to achieve a particular design requirement. There are often cases where an element needs to fill the available vertical space or otherwise align with adjacent objects at all widths.

The scheme allows for responsive dependancies where an element watches annother element for changes in size. In the example below:

  • #Container1 is the observed container data-jsclass="digitopiaContainer". It has a natural height based on its content and the width of the column.
  • #Container2 observes container 1 data-jsclass="digitopiaContainer" data-follow-element-height="#container1"
  • #Container3 observes container 2 data-jsclass="digitopiaContainer" data-follow-element-height="#container2"

Resize the window and the height of all 3 stay in sync.

#container1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

#container2 Hi there. This container gets its height from "container 1"

#container3 Hai. I get my height from container 2.

The same can be done for width and the observed container does not have to be the same for width and height.

The container controller has a special shorthand mode which causes the container to match the dimensions of its parent. In this example a container has several absolutely positioned elements within it that need to maintain the same size as their container as it resizes.

  1. markup
                          
  2. styles define height at various breakpoints.
                          
  3. working example (resize screen to see resizing behavior)
    slide 1
    slide: 1 / 2 / 3 / 4

The container behavior can be turned off for particular breakpoints. For example twitter bootstrap folds the fluid columns at window widths below 768px which the geometry controller defines as the 'small' breakpoint by default. For the example above the height alignment behavior can be turned off for the 'small' and 'tiny' breakpoints allowing the containers to assume their natural height.

  • #Container1 is the observed container data-jsclass="digitopiaContainer". It has a natural height based on its content and the width of the column.
  • #Container2 observes container 1 only at medium,large,huge breakpointsdata-jsclass="digitopiaContainer" data-follow-element-height="#container1 data-scales="medium,large,huge"
  • #Container3 observes container 2 only at medium,large,huge breakpointsdata-jsclass="digitopiaContainer" data-follow-element-height="#container2 data-scales="medium,large,huge"

#container1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

#container2 Hi there. This container gets its height from "container 1" but only at larger breakpoints

#container3 Hai. I get my height from container 2. but only at larger breakpoints

The container controller emits the following events

  • digitopiaContainerDidResize: Event is triggered on all controllers within the container.
  • digitopiaContainerDidResizeXXXXX: Where XXXXX is the id of the container to watch when finer control is needed

You can define controllers that listen for digitopiaContainerDidResize events or listen to specific containers in cases where specific resize order is required. Example to follow.

Loading...