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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -