CODEWITHSUNDEEP
javascriptcssangularjsflexboxangular-material
Saurabh
Saurabh

Reputation: 73649

Grid System doesn't shows color as in documentation

I just started to use angular-material. I was trying out grid elements in my example, I am testing flex attribute. In the example, this shows three different color for each flex element, but in the codepen, I am not getting those colors.

Here is my code:

HTML:

<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <meta name="viewport" content="initial-scale=1" />
  </head>
  <body layout="column" ng-controller="AppCtrl">
    <md-toolbar layout="row">
      <div class="md-toolbar-tools">
        <md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
          <md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
        </md-button>
        <h1>Hello World</h1>
      </div>
    </md-toolbar>
<div layout="row">
  <div flex>
    [flex]
  </div>
  <div flex>
    [flex]
  </div>
  <div flex hide-sm>
    [flex]
  </div>
</div>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
  </body>
</html>

JS:

var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };

}]);

Please help.

Upvotes: 0

Views: 42

Answers (1)

rpirsc13
rpirsc13

Reputation: 443

The css is not included in the example. The colors are there to denote the differences between grid size. You can color them using CSS3 nth child selector. You cand find documentation here: http://www.w3schools.com/cssref/sel_nth-child.asp

As an example for your code you can have

#parentDivId div:nth-child(1) {
    background: red;
}
#parentDivId div:nth-child(2) {
    background: blue;
}
#parentDivId div:nth-child(3) {
    background: yellow;
}

So an and so forth. Rename parentDivId with the ID of parent DIV.

DEMO : http://codepen.io/anon/pen/epyQVN

Upvotes: 1

Related Questions