Skip to content
This repository has been archived by the owner on Jun 14, 2018. It is now read-only.

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

Open
SoftTimur opened this issue Jul 25, 2017 · 1 comment
Open

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

SoftTimur opened this issue Jul 25, 2017 · 1 comment
Labels
waiting-on-response

Comments

@SoftTimur
Copy link

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
Copy link
Member

The code that handles this is here:

ng-officeuifabric/src/components/commandbar/commandBarDirective.ts

Lines 328 to 336 in c92a584

if (element.offset >= elem.prop('offsetWidth') - 200) {
angular.element(elem[0].querySelectorAll('.ms-CommandBarItem')[element.index]).addClass('is-hidden');
scope.hiddenItems[element.index].visible = true;
scope.overflowVisible = true;
} else {
angular.element(elem[0].querySelectorAll('.ms-CommandBarItem')[element.index]).removeClass('is-hidden');
scope.hiddenItems[element.index].visible = false;
scope.overflowVisible = false;
}

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...

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
waiting-on-response
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@andrewconnell @SoftTimur