上下文菜单的宽度

我试图使用命令栏ng-office-ui-fabric，并修改了宽度uif-contextextual-menu-item。这里是一个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修改第一菜单的宽度（因为它太大了），但子菜单的位置成为uncorrect。有谁知道如何解决这一问题？您jsbin

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

修改：

来源

2017-07-18 SoftTimur

类似the previous answer，如果你让left: 100%，而不是一个固定的像素宽度，你可以改变导航到你心中的内容的宽度，它将永远留在它应该在的地方。

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

来源

2017-07-25 11:16:44 mikestreety

只需相应更改left属性的子菜单CSS https://jsbin.com/fowahoxiqu/edit?html,output

来源

2017-07-25 11:10:01 Danmoreng

上下文菜单的宽度

回答

相关问题