上下文菜单的宽度

Question

我正在尝试使用ng-office-ui-fabric, and modify the width of uif-contextextual-menu-item. 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>
  <style>
    .menu1.ms-ContextualMenu {
      width: 110px
    }
  </style>
</head>
<body ng-app="YourApp"> 
  <div ng-controller="YourController">
      <uif-command-bar>
        <uif-command-bar-main>
          <uif-command-bar-item>
            <span>14</span>
            <uif-icon uif-type="chevronDown"></uif-icon>
            <uif-contextual-menu uif-is-open="true" class="menu1">
              <uif-contextual-menu-item uif-text="'add'"></uif-contextual-menu-item>
              <uif-contextual-menu-item uif-text="'minus'"></uif-contextual-menu-item>
              <uif-contextual-menu-item uif-type="subMenu">
                <uif-content>Versions</uif-content>
                  <uif-contextual-menu uif-is-open="true">
                    <uif-contextual-menu-item uif-text="'1'"></uif-contextual-menu-item>
                    <uif-contextual-menu-item uif-text="'2'"></uif-contextual-menu-item>
                  </uif-contextual-menu>
                </uif-contextual-menu-item>
            </uif-contextual-menu>
          </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>

如您所见，我设法将第一个菜单的宽度修改了.menu1.ms-ContextualMenu（因为它太大了），但是子菜单的位置变得不正确。有谁知道如何解决这个问题？

Answer 1

只需相应地更改 CSS 中子菜单的 left 属性：

.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
    left: 108px;
}

修改了你的jsbin：https://jsbin.com/fowahoxiqu/edit?html,output

Answer 2

与类似，如果您设置left: 100%而不是固定的像素宽度，您可以根据自己的喜好更改导航的宽度，它会始终保持在应有的位置。

.menu1.ms-ContextualMenu .ms-ContextualMenu {
    left: 100%;
}

上下文菜单的宽度

Width of contextual menu

javascript

css

office-js

office-ui-fabric