CODEWITHSUNDEEP
angularjsflexbox
François
François

Reputation: 325

Angular layout/flex not applied

I'm trying to use angular-material layout/flex feature but it is not working. The layout and flex directives are supposed to be inserted into class property but using dev tools I can see that class property remain absent.

If I enter classes explicitly (class="layout-row" class="flex" ...) it is working.

What am I missing ?

Here is the code :

<!DOCTYPE html>
<html ng-app="zz">
  <head>
    <meta charset="utf-8">
    <title>ZZZ</title>
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
    <link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
    <!-- endbower -->
    <style media="screen">
      div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
      }
    </style>
  </head>
  <body>

  <div class="container">
    Hello world from the container-div
    <div layout="row">
      <div flex>First item in row</div>
      <div flex>Second item in row</div>
    </div>
    <div layout="column">
      <div flex>First item in column</div>
      <div flex>Second item in column</div>
    </div>
  </div>

    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-messages/angular-messages.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>
    <script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
    <!-- endbower -->

    <script type="text/javascript">
      angular.module('zz',[]);
    </script>

  </body>
</html>

Here is what I expect (from https://material.angularjs.org/latest/layout/container ):

enter image description here

And what I obtain :

enter image description here

Thanks.

Upvotes: 3

Views: 1509

Answers (1)

Guillermo Aguirre
Guillermo Aguirre

Reputation: 841

Maybe it's best to use css instead of custom AngularJS directives to order components in the view. This will give you more freedom if/when you have to change something, and can be applied everywhere not just in AngularJS

What you want to achieve can be easily done with the display: flex css property. Here's a good explanation on how to use it.

<div class="container">
  <div class="row">
    <div>First item in row</div>
    <div>Second item in row</div>
  </div> 
  <div class="column">
    <div>First item in column</div>
    <div>Second item in column</div>
  </div>
</div>

With the css being:

.container {
  display: flex;

  .row {
    display: flex;
  }

  .column {
    display: flex;
    flex-direction: column;
  }
}

Upvotes: 1

Related Questions