CODEWITHSUNDEEP
javascriptangularjsmaterial-designangular-material
user3554664
user3554664

Reputation: 349

Angular Material layouts demo isn't working

I'm trying to just run the Angular Material grid layouts demo that can be found here titled Flex Percent Values.

Excerpts from my HTML code is as follows:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1" />
  <!-- LINK TO LOCAL BUT HOW? -->
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc4/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="../../../bower_components/angular-material/modules/css/angular-material-layouts.css">
  <base href="/">
</head>
<body data-ng-app="MyApp" data-ng-controller="MainCtrl">
    <div layout="row" layout-wrap>
      <div flex="30">
        [flex="30"]
      </div>
      <div flex="45">
        [flex="45"]
      </div>
      <div flex="25">
        [flex="25"]
      </div>
      <div flex="33">
        [flex="33"]
      </div>
      <div flex="66">
        [flex="66"]
      </div>
      <div flex="50">
        [flex="50"]
      </div>
      <div flex>
        [flex]
      </div>
    </div>
    <div ng-view></div>
<!-- Angular Material Dependencies -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>

<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.js"></script>

When I add Material Angular elements like md-button they render, although anything layout related doesn't work. I've double checked that I'm importing all the stylesheets I need, and I think I am. I'm not sure what's wrong though.

Upvotes: 0

Views: 138

Answers (1)

Vi100
Vi100

Reputation: 4203

You're linking to the CSS stylesheet of the 1.0.0-rc4 version but you're loading the scripts of the 0.11.2 version...

I'm pretty sure that this is the problem!

Upvotes: 4

Related Questions