Using angular ui.layout in column mode - how to create a bottom aligned element

Question

I just started to use angular ui-layout to allow splitting panes in a UI.

I'm trying to create a sidebar that has this blue element on the bottom

Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.

EDIT: added the HTML

<ui-layout options="{ flow: 'row' }">
    <div ui-layout-container> top part </div>
    <div ui-layout-container> blue box</div>
</ui-layout>

Answer 1

I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.

ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.

This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.

<div class="container flex flex-column">
  <div class="top flex flex-row flex-auto flex-stretch">
    <div class="flex-auto">Top</div>
    <div class="sidebar">sidebar</div>
  </div>
  <div style="background:blue">Bottom</div>
</div>

If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.

To know more about flex box, you can see this example. http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.