Context menu width
I am trying to use the ng-office-ui-fabric command line and change the width uif-contextextual-menu-item
. Here is the 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>
As you can see, I was able to change the width of the first menu to .menu1.ms-ContextualMenu
(because it was too big), but the position of the submenu became incorrect. Does anyone know how to fix this?
source to share
As in the previous answer , if instead of a fixed pixel width you do left: 100%
, you can change the navigation width to your heart's content and that will always stay where it should.
.menu1.ms-ContextualMenu .ms-ContextualMenu {
left: 100%;
}
source to share
Just change the property left
for the submenu in CSS accordingly:
.ms-ContextualMenu-link.ms-ContextualMenu-link--hasMenu ~ .ms-ContextualMenu {
left: 108px;
}
Changed your jsbin: https://jsbin.com/fowahoxiqu/edit?html,output
source to share