Make the command bar unresponsive

Question

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>

flyer · Accepted Answer · 2017-07-18T19:55:47.823

By default the text is set to not display in the css. Ie:

CommandBarItem .ms-CommandBarItem-commandText {
    display: none;
}

Then they using media queries to only show those elements when the width is over 640px ie:

@media only screen and (min-width: 640px)
fabric.components.min.css:6
.ms-CommandBarItem .ms-CommandBarItem-chevronDown, .ms-CommandBarItem .ms-CommandBarItem-commandText {
    display: inline;
}

You could override their styles by supplying your own that don't use media queries and just be sure that your css loads after their css (so it takes precedence). ie:

 CommandBarItem .ms-CommandBarItem-commandText {
        display: inline;
    }

Here is a sample app demonstrating this. Note that I had to add the styles in the head tag inline in a style tag b/c of how the inline editor loads its assets. Normally you would just load your own custom css in a link tag (make sure its loaded last).

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <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>

  <style>
    .ms-CommandBarItem .ms-CommandBarItem-chevronDown,
    .ms-CommandBarItem .ms-CommandBarItem-commandText {
      display: inline;
    }
  </style>
</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>

This is how I figured this out. Using chrome dev tools, I right mouse clicked on the text and choose inspect. This shows the element and the styles associated with it. The default style was to have display: none; applied. When you resize the browser more than 640px wide, you'll see the media query being applied that now says to display: inline; the element.

Updated my answer with an inline demo. When I resize my entire browser those labels no longer disappear. — flyer, Jul 18 '17 at 19:25
cool, it works now... how did you know it is `.ms-CommandBarItem` and `.ms-CommandBarItem-commandText` that control that part? — SoftTimur, Jul 18 '17 at 19:37

Make the command bar unresponsive

1 Answers1