CODEWITHSUNDEEP
javascriptangularjsangular-material
Pho3nixHun
Pho3nixHun

Reputation: 828

Angular-material flex does nothing

I'd like to create a login page with angular-material's layout directive, but I ran into a problem with flex. At line 8 shouldn't flex=10 have to set the div's height to 10%? Am I miss something important?

Thank you in advance for any kind of help!

* > div {
  background-color: rgba(50, 150, 255, .5);
}
* > div:nth-of-type(2) {
  background-color: rgba(255, 255, 120, 1);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-csp.css" rel="stylesheet" />

<body layout="column">
  <div class="login" layout="row" flex>
    <div flex></div>
    <div layout="column">
      <div flex=10></div> <!-- Here: Why is this not working? -->
      <div>
        Hello
      </div>
      <div flex></div>
    </div>
    <div flex></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
</body>

PS.: I'm using chrome 49.0.2623.112 m (64-bit)

Upvotes: 1

Views: 10583

Answers (1)

huseyinozcan
huseyinozcan

Reputation: 86

If you define a height for outer div and layout-fill attribute for your container, it should work.

* > div {
  background-color: rgba(50, 150, 255, .5);
}
* > div:nth-of-type(2) {
  background-color: rgba(255, 255, 120, 1);
}
<link href="https:////cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-csp.css" rel="stylesheet" />

<body layout="column">
<div class="login" layout="row" flex style="height: 200px">
    <div flex></div>
    <div flex layout="column" layout-fill>
        <div flex="20" style="background-color: #87CEFA;">
            flex20
        </div>
        <div flex="10" style="background-color: #B0E2FF;">
            flex10
        </div>
        <div flex="30" style="background-color: #87CEFA;">
            flex30
        </div>
    </div>
    <div flex></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.7/angular-material.min.js"></script>
</body>

Upvotes: 1

Related Questions