{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 仙女界的扛把子 的问题《Width of contextual menu》','https://www.manongdao.com/q-909307.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to use the command bar of 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>
As you can see, i managed to modify the width of the first menu by .menu1.ms-ContextualMenu (because it was too large), but the position of the submenu became uncorrect. Does anyone know how to fix this?
Just change the
leftproperty for the submenu in CSS accordingly:Modified your jsbin: https://jsbin.com/fowahoxiqu/edit?html,output
Similar to the previous answer, if you make
left: 100%instead of a fixed pixel width, you can change the width of the navigation to your heart's content and it will always stay where it should.