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.

Answers 1

  • 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?


Related Articles