css - Don't hide items when there are still space -
i trying use command bar of ng-office-ui-fabric, here 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 change width of preview, see items hidden (we see class is-hidden
added), though there visually lots of space.
does know how control limit width such items not hidden easily?
another option never hiding command items, know how enable this?
otherwise, possible make command bar office-ui-fabric
in angularjs
without ng-office-ui-fabric
?
Comments
Post a Comment