Why my “code” HTML element doesn't have the design set by AngularJS Material?

Question

In AngularJS Material's official site, I tried this demo on my laptop: AngularJS Material | Custom Separator Keys. Everything's good except for my <code> HTML element tag that doesn't get the right CSS styling. I inspected the element and this should be the actual style (like the result in AngularJS Material Demo and also in codepen):

I don't know what is wrong with my code. Having the problem in my <code> element tag could mean that it might be the same case if I use the other HTML elements in my code (not getting the AngularJS Material Design).

PS. My code is different from the demo because I have to change the format of my code in order for it to work (I don't know the reason why I can't directly inject "the self-invoking function-way" to my controller. I had to create a module first before I can connect it with my controller)

Here is my code:

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home | AngularJS Material Design (Practice)</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.22/angular-material.min.css">
  <style>
    .chipsdemoCustomSeparatorKeys h2 {
      margin-bottom: 0;
    }
  </style>
</head>

<body>
  <div ng-controller="CustomSeparatorCtrl" layout="column" ng-cloak="" class="chipsdemoCustomSeparatorKeys"
    ng-app="MyApp">
    <md-content class="md-padding" layout="column">

      <h2 class="md-title">
        Use <code>md-separator-keys</code> to customize the key codes which trigger chip creation.
      </h2>
      <md-subheader id="commaSeparatorKeyDescription">
        You can use either the Enter or Comma keys to trigger chip creation.
      </md-subheader>
      <md-chips ng-model="tags" input-aria-label="Tags" md-separator-keys="keys" placeholder="Ex. angularjs-material"
        secondary-placeholder="Add another tag" input-aria-describedby="commaSeparatorKeyDescription">
      </md-chips>
      <br>

      <h2 class="md-title">Add custom separator key codes such as semicolon for e-mails.</h2>
      <md-subheader id="customSeparatorKeyDescription">
        You can use the Semicolon, Enter, or Comma keys to trigger chip creation.
      </md-subheader>
      <md-chips ng-model="contacts" input-aria-label="Emails" md-separator-keys="customKeys"
        placeholder="Ex. [email protected]" secondary-placeholder="Add another email address"
        input-aria-describedby="customSeparatorKeyDescription">
      </md-chips>
    </md-content>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.22/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route/1.8.0/angular-route.min.js"></script>
  <!-- <script src="angular-route.min.js"></script> -->

  <script>
    var app1 = angular.module('MyApp', ["ngMaterial"]);

    app1.controller('CustomSeparatorCtrl', DemoCtrl);

    function DemoCtrl($scope, $mdConstant) {
      $scope.keys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA];
      $scope.tags = [];

      // Any key code can be used to create a custom separator
      var semicolon = 186;
      $scope.customKeys = [$mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA, semicolon];
      $scope.contacts = ['[email protected]'];
    }
  </script>
</body>

</html>

Thank you!

Thats because the <code> styling in the documention is coming from a seperate stylesheet and isn't part of the AngularJS Material standard CSS. — MikeS
I tried to run AngularJS Material's demo in TutorialsPoint's online compiler and in codepen.io too, is it just a coincidence that they all have the same separate stylesheet? — Mark Cay
Do you have a link to the CodePen? You can see a list of linked stylesheets so that would give an indication of where the style is. — MikeS

Splaktar Splaktar · Accepted Answer · 2020-07-10T20:16:10

The style for <code> comes from our documentation site's CSS and not from the angular-material.min.css file.

If you add the following to the <head> of your index.html, you should see that style applied to <code> blocks (along with a lot of other styles for a range of elements and classes).

  <link rel="stylesheet" href="https://material.angularjs.org/1.1.24/docs.css">

Why my “code” HTML element doesn't have the design set by AngularJS Material?

1 Answers