上下文菜單的寬度

我試圖使用命令欄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

上下文菜單的寬度

回答

相關問題