Using angular ui.layout in column mode - how to create bottom aligned element
I've just started using angular ui-layout to allow splitting of panels in the UI.
I am trying to create a sidebar with this blue element at the bottom
Is there a way to trick the u-layout directive to achieve this? I've tried doing size
, but it just makes the size absolute, I want the blue cell to just take up some space (showing 100% of the content) and the element above it should scroll and take up the rest of the vertical space.
EDIT: Added HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
source to share
I don't know why you want to use ui.layout, but I would not recommend using it to achieve what you want.
ui.layout uses a flex box model and you can use it yourself without using any other invasive javascript layout. You can completely accomplish what you want using just css.
This is what I did to achieve what you only want to use with 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 using Angular Material Design and it is advanced and makes more sense than ui.layout.
To learn more about the flex box, you can see this example. http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview .
source to share