Make the command bar unresponsive

Viewed 343

I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric.

In the following example, when the wide of the screen is limited, we can observe that the span (eg, 3rd, 14) are hidden. This is not what I want; I want them to be always displayed no matter the width of the screen.

Does anyone know how to make the command bar unresponsive?

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
  <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
</head>
<body ng-app="YourApp"> 
  <div ng-controller="YourController">
      <uif-command-bar>
        <uif-command-bar-main>
          <uif-command-bar-item>
            <uif-icon uif-type="save"></uif-icon>
            <span>3rd</span>
          </uif-command-bar-item>
          <uif-command-bar-item>
            <span>14</span>
            <uif-icon uif-type="chevronDown"></uif-icon>
          </uif-command-bar-item>
        </uif-command-bar-main>
      </uif-command-bar>
  </div>
  <script type="text/javascript"> 
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
    .controller('YourController', function () {})
  </script>
</body>
</html>
1 Answers
Related