Angularjs material design input not working even after loading css and js files

Question

This my code.... in this material css is not geting applied to input fields and they are appearing as normal html inputs.

I have used material css and js cdns and both of them are same versions. I dont know why its not working. I checked other posts in stackoverflow but i didn't got the solution. so, Somebody please help me with this thing...

var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('custom')
.primaryPalette('blue')
.accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {

});

.header {
            text-align: center;
            height: 80px;
            margin-left: 555px !important;
            line-height: 80px;
            color:white;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: Verdana,sans-serif;
            font-size: 12px;
            color: #111;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
            background-size: cover;
        }

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login to Data Portal</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
    <div ng-app="sdp" ng-controller="MyCtrl">
        <md-toolbar style="background: #174a7a;">
            <div class="md-toolbar-tools">
                <h1 class="header">LOGIN</h1>
            </div>
        </md-toolbar>
    </div>
    <div>
        <md-card >
            <md-card-content>
                <md-card-title>
                    <md-card-title-text>
                        <span class="md-headline">Card</span>
                    </md-card-title-text>
                </md-card-title>
                <ng-form name="colorForm">
                    <div layout-gt-xs="row">
                        <md-input-container>
                            <label> Username </label>
                            <input ng-model="un" required>
                        </md-input-container>
                        
                         <md-input-container>
                            <label> Password </label>
                            <input ng-model="pswd" required>
                        </md-input-container>
                    </div>
                </ng-form>
            </md-card-content>
        </md-card>
    </div>
</body>
</html>

Omar Einea · Accepted Answer · 2018-01-11 10:23:39Z

You've placed the ng-app on your toolbar div, so your AngularJS app is only working inside that part of the page.

Remove it from there and add it to your body tag to have it affect all of your page, like so:

<body ng-app="sdp">
    <div ng-controller="MyCtrl">
    ...

Here's the full code with the change:

var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
    $mdThemingProvider.theme('custom')
      .primaryPalette('blue')
      .accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {

});

.header {
    text-align: center;
    height: 80px;
    margin-left: 555px !important;
    line-height: 80px;
    color:white;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    color: #111;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
    background-size: cover;
}

<html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <title>Login to Data Portal</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  </head>
  <body ng-app="sdp">
      <div ng-controller="MyCtrl">
          <md-toolbar style="background: #174a7a;">
              <div class="md-toolbar-tools">
                  <h1 class="header">LOGIN</h1>
              </div>
          </md-toolbar>
      </div>
      <div>
          <md-card >
              <md-card-content>
                  <md-card-title>
                      <md-card-title-text>
                          <span class="md-headline">Card</span>
                      </md-card-title-text>
                  </md-card-title>
                  <ng-form name="colorForm">
                      <div layout-gt-xs="row">
                          <md-input-container>
                              <label> Username </label>
                              <input ng-model="un" required>
                          </md-input-container>

                           <md-input-container>
                              <label> Password </label>
                              <input ng-model="pswd" required>
                          </md-input-container>
                      </div>
                  </ng-form>
              </md-card-content>
          </md-card>
      </div>
  </body>
</html>

I did like that but still not working i have also tried refreshing browser cache
The snippet I attached isn't working for you? it's working fine for me.

Collectives™ on Stack Overflow

Angularjs material design input not working even after loading css and js files

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related