0

I have been trying to use the Office UI Fabric's Command Bar control in Office.js API Microsoft Word application.

The buttons that are seen in the main bar all work as intended when the app is displayed in the maximum width of the task pane. When I re-size the task pane to smaller width and the buttons move into the '...' (ellipsis) drop down they stop working.

I've tried explicitly adding copies of the buttons in the code into the ms-CommandBar-overflowButton container, but it will only take the functionality of the first item and duplicates it for every other item. I've used the code from the Ui Fabric JS documentation page and I'm not sure why the buttons stop working when moved into context menu.

Office UI Fabric version: 1.2.0 Office UI Fabric Core version: 4.1.0

Alfree92
  • 45
  • 6
  • Please add into description the version number of the Office UI Fabric JS and Office UI Fabric Core you are using with your app. – Slava Ivanov Jul 25 '17 at 18:48
  • The current version of [Office Fabric UI JS](https://github.com/OfficeDev/office-ui-fabric-js) is 1.4 and the [Fabric Core](https://github.com/OfficeDev/office-ui-fabric-core) is 7.1. Would you mind to try to use newest libs? May be they already fixed the Command Bar out of the box. As the [backlog](https://github.com/OfficeDev/office-ui-fabric-js/issues?q=is%3Aopen+is%3Aissue) they still have some issues opened against of the component. – Slava Ivanov Jul 25 '17 at 19:20
  • I've just updated Fabric UI and Fabric Core to 1.4.0 and 7.1.2 respectively and nothing has changed in terms of functionality. Any other suggestions? – Alfree92 Jul 25 '17 at 19:59
  • Is this something you experience: [CommandBar: Event handlers lost when moved into overflow](https://github.com/OfficeDev/office-ui-fabric-js/issues/26)? Still open issue. Unfortunately we are using old 2.6 lib and we don't have issues with Commandbar control. For new lib you may want to post question directly into GitHub of developers. As alternative you may post reference to codepen snippet of you command bar where issue is observed, somebody may have a look. – Slava Ivanov Jul 25 '17 at 20:47
  • I know this is a bit of an old one but I was having the same problem as described and the context menu items weren't bringing over the onclick event. To get around this I added this line to CommandBar.prototype._drawCommands in fabric.js `this.contextualItemOnClick = this._elements.contextMenu.querySelector(CONTEXTUAL_MENU_LINK).onclick;` – Marmalade Jul 02 '18 at 16:17
  • Interesting solution. We ended up ditching the context bar in favor for another design. We only needed 3 functions so we stacked some buttons on top of each other instead. – Alfree92 Jul 10 '18 at 17:00

1 Answers1

1

Comment the itemType in the projectMenuItem function. This would fix the overflow issue.

private projectMenuItem(menuItem: SPTermStore.ISPTermObject, itemType: ContextualMenuItemType) : IContextualMenuItem { return({ key: menuItem.identity, name: menuItem.name, //itemType: itemType, iconProps:{ iconName: (menuItem.localCustomProperties.iconName != undefined ? menuItem.localCustomProperties.iconName : null)}, href: menuItem.terms.length == 0 ? (menuItem.localCustomProperties["_Sys_Nav_SimpleLinkUrl"] != undefined ? menuItem.localCustomProperties["_Sys_Nav_SimpleLinkUrl"] : null) : null, subMenuProps: menuItem.terms.length > 0 ? { items : menuItem.terms.map((i) => { return(this.projectMenuItem(i, ContextualMenuItemType.Normal)); }) } : null, isSubMenu: itemType != ContextualMenuItemType.Header, }); }

Bhavana
  • 11
  • 1