ngOfficeUIFabric / ng-officeuifabric

Office UI Fabric (https://github.com/OfficeDev/office-ui-fabric) implementation for Angular
http://ngOfficeUiFabric.com
MIT License
320 stars 67 forks source link

Don't hide items when there are still space #506

Open SoftTimur opened 7 years ago

SoftTimur commented 7 years ago

I am trying to use the command bar of ng-office-ui-fabric, here is a code

<!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>
            <span>one</span>
          </uif-command-bar-item>
          <uif-command-bar-item>
            <span>two</span>
          </uif-command-bar-item>
          <uif-command-bar-item>
            <span>three</span>
          </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', ['$scope', function ($scope) {}])
  </script> 
</body>
</html>

If we change the width of the preview, we could see that the items are hidden very easily (we could see a class is-hidden is added), even though there are visually lots of space.

Does anyone know how to control this limit width such that the items are not hidden easily?

Another option is never hiding the command items, does anyone know how to enable this?

andrewconnell commented 7 years ago

The code that handles this is here: https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/c92a5847b232a40976a06e8e1a98eb37f8498d59/src/components/commandbar/commandBarDirective.ts#L328-L336

If the offset is less than with width - 200px, it's hidden. Not sure where the logic originated from or if it was arbitrary. @tobiaswest83 was original author... maybe he has thoughts...