CODEWITHSUNDEEP
javascriptangularjsmaterial-designflexboxangular-material
Liron
Liron

Reputation: 2032

Angular Material Flex gives the wrong size

It seems that certain values for setting flex in the Angular Material layout library don't seem to work.

Here is a very simple example which shows this behavior. As you can see if you click through, the sizes of some of the values are correct and others don't seem to make any sense.

http://codepen.io/anon/pen/RaQzxr

Has anyone seen this before?

<div ng-cloak ng-app="MyApp">

  <div layout="row">
    <md-card flex="10">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 10%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="11">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 11%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="12.5">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 12.5%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="15">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 15%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="16">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 16%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="19">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 19%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
  <div layout="row" layout-xs="column">
    <md-card flex="20">
      <h2>Card title #1</h2>
      <md-card-content>
        <p>This should be 20%!</p>
      </md-card-content>
    </md-card>
    <md-card flex>
    </md-card>
  </div>
</div>

Upvotes: 0

Views: 220

Answers (1)

sdfacre
sdfacre

Reputation: 1273

quote from Angular Material site: "A layout child's flex directive can be given an integer value from 0-100. The element will stretch to the percentage of available space matching the value. Currently, the flex directive value is restricted to multiples of five, 33 or 66."

https://material.angularjs.org/latest/layout/children

Upvotes: 3

Related Questions