Shurui Liu Shurui Liu - 4 months ago 33
AngularJS Question

Angularjs md-button words capitalize

I made some md-buttons in this way below, but unfortunately the second word within tags are not capitalized if there is more than one word.

<md-button ui-sref="DMmain">
<i class="fa fa-cog fa-2x"></i>
<h3>Device Management</h3>
</md-button>
<md-button ui-sref="ARmain">
<i class="fa fa-lock fa-2x"></i>
<h3>Access Rules</h3>
</md-button>
<md-button ui-sref="UMmain">
<i class="fa fa-user fa-2x"></i>
<h3>User Management</h3>
</md-button>
<md-button>
<i class="fa fa-file-text fa-2x"></i>
<h3>Account Profile</h3>
</md-button>


The effect is like this image below,
enter image description here

<i class>
is a library called Font Awesome that I used for icons only. Thanks in advance for any ideas how to solve this problem.

EDITED & SOLVED: Doing
text-transform: capitalize !important;
for
md-button
does not really work. You have to put class onto those tags you want to edit and add
text-transform: capitalize;
to your class in css file.

Answer

Unfortunately you have to override the CSS to achieve this, as follows:

(function() {
  "use strict";
  angular.module('app', ['ngAnimate', 'ngMaterial', 'ngAria'])
    .controller('mainCtrl', function($scope) {

    });
})();
.capitalize-button {
  text-transform: capitalize;
}

/* 
OR just override the .md-button class in your css.

.md-button {
  text-transform: capitalize !important;
} 
*/
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css">
</head>

<body ng-controller="mainCtrl">
  <md-button ui-sref="DMmain">
    <i class="fa fa-cog fa-2x"></i>
    <h3 class="capitalize-button">device management</h3>
</md-button>
<md-button ui-sref="ARmain">
    <i class="fa fa-lock fa-2x"></i>
    <h3 class="capitalize-button">access rules</h3>
</md-button>
<md-button ui-sref="UMmain">
    <i class="fa fa-user fa-2x"></i>
    <h3 class="capitalize-button">user management</h3>
</md-button>
<md-button>
    <i class="fa fa-file-text fa-2x"></i>
    <h3 class="capitalize-button">account profile</h3>
</md-button>
</body>

</html>

I hope it helps!!

Comments