angularjs - Nesting column layout inside a row layout -
i'm trying accomplish nested scrollable layout has left sidebar , right container divided horizontally. i've used ui-layout still quite new (and buggy).
given codepen
<body ng-controller="appctrl" layout="row" layout-fill> <div flex="33" class="blue">left</div> <div flex="66" class="green" layout-fill> <div layout="column" layout-align="start start"> <div flex="25">above</div> <div flex="75">below</div> </div> </div> </body>
why unable see nested column layout properly? expect above
horizontally take 25% of right-hand side of page , below
rest 75%. doing wrong, or possible using layout directive?
change
<div flex="66" class="green" layout-fill> <div layout="column" layout-align="start start"> <div flex="25">above</div> <div flex="75">below</div> </div> </div>
to
<div flex="66" layout="column" layout-align="start start" layout-fill class="green" > <div flex="25">above</div> <div flex="75">below</div> </div>
the reason original code did not work because layout="column" not automatically fill height 100% of it's containing element.
Comments
Post a Comment