<div class="col-md-offset-4 col-md-6">
<div style="margin-top: 50%">
<md-input-container class="col-md-10">
<label>
Username
</label>
<input type="text" ng-model="user.userName">
</md-input-container>
</div>
<br>
<div>
<md-input-container class="col-md-10">
<label>
Password
</label>
<input ng-model="user.userPassword">
</md-input-container>
</div>
<br>
<div class="col-md-10">
<a style="color: #2e98d6; border: 1px solid #2e98d6; text-transform: none; cursor: pointer;
min-height: 36px; min-width: 150px; font-weight: 500; font-size: 14px; border-radius: 37px;
padding: 0 20px;" class="md-button md-primary primary-btn pull-right" ng-click="doLogin()">Login</a>
</div>
</div>
I am trying to apply custom css class to my angular material but it is not working but if I using inline style then I can.
This works! So some of the styles were getting overridden by angular-material class, the simplest fix for this will be to add
!important
to the CSS properties that are getting overridden!How to check what is getting overridden?
Open the console, select the element that you want to check, click the element and check for the CSS class you added, if any of the properties of that particular class have a
strikethrough
on them, then you add!important
on that particular property!Note: Since the stylesheets were not provided, I worked with the classes added by
angular-material
by default. Also Please ignore the Javascript part in the fiddle.JSFiddle Demo
CSS: