Sourajyoti Bose Sourajyoti Bose - 9 months ago 72
CSS Question

Cannot get Angular Material flex to work for layout

I have an Angular module which I refer in the index.html. The template file for the module is as follows:

<div id="{{$ctrl.link}}" class="container-fluid">
<div layout="row">
<div flex layout="row" layout-fill style="height:100%;">
<div flex="40">
<img src="{{$ctrl.image}}" height="600px"></img>
</div>
<div flex="40">
Other Flex part
</div>
<div flex="20">
</div>
</div>
</div>
</div>


The 2 divs should stack up in rows like -> div | div | div .However the divs just stack up in column.

Answer Source

Your code doesn't seem to have any issues in HTML ( besides img being a self closing tag)

Although I simplified your code a bit.

CODEPEN

angular.module('myApp', ['ngMaterial'])
<body ng-app="myApp">
  <div id="{{$ctrl.link}}" class="container-fluid">
    <div layout="row">
      <div flex layout="row">
        <div flex="40">
          <img src="//placehold.it/200" />
        </div>
        <div flex="40">
          Other Flex part
        </div>
        <div flex="20">hey
        </div>
      </div>
    </div>
  </div>
</body>

P.S. - Did you use ngMaterial in your angular.module?