CODEWITHSUNDEEP
htmlcssangularjsmaterial-designangular-material
Arcanyx
Arcanyx

Reputation: 870

Why is my Material AngularJS (CSS) not working as in the demo provided?

I am a total newbie to the World of AngularJS. However, I wish to implement the material design version of AngularJS for creating a form.

So I followed the getting started instructions and tried to do something, but it did not look like the one on the site. So, I copied a basic demo from Codepen

I think that I have added all the necessary files. But I am still not able to make it look like that on Codepen. I am pretty sure its some CSS issue, but I am not able to place a finger on that.

Following is my Code:

angular
  .module('MyApp')
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      title: 'Developer',
      email: '[email protected]',
      firstName: '',
      lastName: '',
      company: 'Google',
      address: '1600 Amphitheatre Pkwy',
      city: 'Mountain View',
      state: 'CA',
      biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
      postalCode: '94043'
    };
  })
  .config(function($mdThemingProvider) {

    // Configure a dark theme with primary foreground yellow

    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();

  });
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.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-route.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/angularjs/1.3.15/angular-messages.min.js"></script>


<script src="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.js"></script>

<div ng-controller="DemoCtrl" layout="column" class="inputdemoBasicUsage" ng-app="MyApp">

  <md-content md-theme="docs-dark" layout-padding="" layout="row" layout-sm="column">
    <md-input-container>
      <label>Title</label>
      <input ng-model="user.title">
    </md-input-container>
    <md-input-container>
      <label>Email</label>
      <input ng-model="user.email" type="email">
    </md-input-container>
  </md-content>

  <md-content layout-padding="">
    <form name="userForm">

      <div layout="" layout-sm="column">
        <md-input-container style="width:80%">
          <label>Company (Disabled)</label>
          <input ng-model="user.company" disabled="">
        </md-input-container>

        <md-input-container flex="">
          <label>Submission Date</label>
          <input type="date" ng-model="user.submissionDate">
        </md-input-container>
      </div>

      <div layout="" layout-sm="column">
        <md-input-container flex="">
          <label>First name</label>
          <input ng-model="user.firstName">
        </md-input-container>
        <md-input-container flex="">
          <label>Last Name</label>
          <input ng-model="theMax">
        </md-input-container>
      </div>

      <md-input-container flex="">
        <label>Address</label>
        <input ng-model="user.address">
      </md-input-container>
      <md-input-container md-no-float="">
        <input ng-model="user.address2" placeholder="Address 2">
      </md-input-container>

      <div layout="" layout-sm="column">
        <md-input-container flex="">
          <label>City</label>
          <input ng-model="user.city">
        </md-input-container>
        <md-input-container flex="">
          <label>State</label>
          <input ng-model="user.state">
        </md-input-container>
        <md-input-container flex="">
          <label>Postal Code</label>
          <input ng-model="user.postalCode">
        </md-input-container>
      </div>

      <md-input-container flex="">
        <label>Biography</label>
        <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
      </md-input-container>


    </form>
  </md-content>

</div>

Any help is appreciated. Thanks!

Upvotes: 1

Views: 9551

Answers (1)

Vlad Pintea
Vlad Pintea

Reputation: 853

You need to inject the dependency into your app, like so .module('MyApp', ['ngMaterial']), and make sure the js for ngMaterial is loaded in your index.html. Just rewriting ".module('MyApp', ['ngMaterial'])" in the codepen seems to do the trick

Upvotes: 11

Related Questions