CODEWITHSUNDEEP
javascriptangularjsmaterial-design
Hubert
Hubert

Reputation: 42

Inputs in material design are not themed

I've got working, buttons, carts, lists, but my inputs are not themed like in the demo here: https://material.angularjs.org/#/demo/material.components.input

Now I've simply copied code from demo, but it's still not working. Here is html: 

    <div ng-controller="View1Ctrl" layout="column" md-theme="green">
  <md-toolbar class="md-primary">
    <h1 class="md-toolbar-tools">
      Top Secret Project
    </h1>
  </md-toolbar>
  <md-content class="md-padding">
    <form name="projectForm">
      <md-input-container>
        <label>Description</label>
        <input md-maxlength="30" required name="description" ng-model="project.description">
        <div ng-messages="projectForm.description.$error">
          <div ng-message="required">This is required.</div>
          <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>Client Name</label>
        <input required name="clientName" ng-model="project.clientName">
        <div ng-messages="projectForm.clientName.$error">
          <div ng-message="required">This is required.</div>
        </div>
      </md-input-container>
      <md-input-container>
        <label>Hourly Rate (USD)</label>
        <input required type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" required>
        <div ng-messages="projectForm.rate.$error">
          <div ng-message="required">You've got to charge something! You can't just <b>give away</b> a Missile Defense System.</div>
          <div ng-message="min">You should charge at least $800 an hour. This job is a big deal... if you mess up, everyone dies!</div>
          <div ng-message="max">$5,000 an hour? That's a little ridiculous. I doubt event Bill Clinton could afford that.</div>
        </div>
      </md-input-container>
    </form>
  </md-content>
</div>

And js:

.controller('View1Ctrl', [function View1Controller() {
        $scope.project = {
            description: 'Nuclear Missile Defense System',
            clientName: 'Bill Clinton',
            rate: 500
        };

}]);

Result: https://i.sstatic.net/FEwzD.png

What am I missing?

Upvotes: 1

Views: 1898

Answers (1)

pixelmord
pixelmord

Reputation: 26

I had the same problem with the release 0.6

Updating to the master branch (currently 0.7-rc3) did fix the issue with not being displayed in material style.

I did not search the issue queue, but there might be an answer/bug report.

Upvotes: 1

Related Questions