Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

layout: flex-basis bug #5345

@Dotneteer

Description

@Dotneteer

flex-offset and flex have width calculation issue in 1.0.0-rc1

Take a look at this code:

<!DOCTYPE html>
<html lang="en" >
<head>
  <title>Simple Layout</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="stylesheet"
        href="./lib/angular-material/angular-material.css"/>
  <link rel="stylesheet"
        href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
  <style>
    div.flex, div.flex-25, div.flex-50 {
      border: 1px dotted gray;
      padding: 8px;
      background-color: #90CAF9; /* Blue 200 */
    }

    div.md-layout-column {
      background-color: #FFE0B2; /* Orange 100 */
      text-align: center;
    }
  </style>
</head>
<body ng-app="myApp">
<div layout="row">
  <div flex flex-offset="20">#1 -->20%</div>
</div>
<div layout="row" style="margin-top: 24px;">
  <div flex flex-offset="50">#2 -->50% (25%)</div>
  <div flex>#3 (25%)</div>
</div>
<div layout="row" style="margin-top: 24px;">
  <div flex="25" flex-offset="25">#4 -->25% (25%)</div>
  <div flex="50" flex-offset="20">#5 -->20% (50%)</div>
</div>

<!-- Angular/Material scripts -->
<script src="./lib/angular/angular.js"></script>
<script src="./lib/angular-animate/angular-animate.js"></script>
<script src="./lib/angular-aria/angular-aria.js"></script>
<script src="./lib/angular-material/angular-material.js"></script>

<!-- App-specific scripts -->
<script type="text/javascript">
  angular
      .module('myApp', ['ngMaterial'])
</script>
</body>
</html>

The first two grid is rendered as expected. The third grid worked OK in previous versions (it overflew the right edge of the window and thus displayed a horizontal scrollbar), but it does not work this way with rc1.
When examining in Chrome, offset spacing is calculated properly, but cell widths are not.

0.11.2: Correct

f0314

1.0.0-rc1: Strange

simple_layout_-_google_chrome_2015-10-24_10-19-25

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions