1

I am trying to use two or more Office-ui-fabric-js Contextual Menus on a SharePoint page, but having problem when introducing the second menu. The first one behaves as it should, expanding a menu on click, but all other menus do not. I am literally copy+pasting the same html and cannot figure out why the first menu works while the others just fail to expand. Do I need to adapt the script to make this work?

Below is a screenshot of the test buttons and the html, plus a link to what I'm referring to. Any clue as to why I'm having problems with this is much appreciated. Apologies if some of the css classes look weird below.

https://github.com/OfficeDev/office-ui-fabric-js/blob/master/ghdocs/components/ContextualMenu.md

My 2 contextual menu buttons, one workinh, one not.

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 4</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server" />
<link rel="stylesheet" href="fabric.min.css" />
<link rel="stylesheet" href="fabric.components.min.css" />
<script src="fabric.min.js"></script>
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-                  fabric-core/5.0.1/css/fabric.min.css" rel="stylesheet" />
<link href="https://static2.sharepointonline.com/files/fabric/office-ui- fabric-js/1.2.0/css/fabric.components.min.css" rel="stylesheet" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui- fabric-js/1.2.0/js/fabric.min.js"></script>
</head>

<body>

<ul>
    <li  class="ms-ListItem">
    <div class="ms-ContextualMenu-basic">
        <button class="ms-Button 
      ms-Button--primary
      "><span class="ms-Button-label">Button 1 that works</span></button>
        <ul class="ms-ContextualMenu  is-hidden ">
            <li class="ms-ContextualMenu-item ms-ContextualMenu-item--hasMenu">
            <a class="ms-ContextualMenu-link " tabindex="1">XXX</a>
            <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
            </i></li>
            <li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
            <a class="ms-ContextualMenu-link " tabindex="1">YYY</a>
            <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--  ChevronRight">
            </i></li>
            <li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
            <a class="ms-ContextualMenu-link   " tabindex="1">ZZZ</a>
            <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--  ChevronRight">
            </i></li>
        </ul>
    </div>
    </li>
    <li class="ms-ListItem">
    <div class="ms-ContextualMenu-basic">
        <button class="ms-Button 
      ms-Button--primary
      "><span class="ms-Button-label">Button 2 that does not work</span>  </button>
        <ul class="ms-ContextualMenu  is-hidden ">
            <li class="ms-ContextualMenu-item ms-ContextualMenu-item--  hasMenu">
            <a class="ms-ContextualMenu-link " tabindex="1">XXX</a>
            <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon-- ChevronRight">
            </i></li>
            <li class="ms-ContextualMenu-item ms-ContextualMenu-item--  hasMenu">
            <a class="ms-ContextualMenu-link " tabindex="1">YYY</a>
            <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--  ChevronRight">
            </i></li>
            <li class="ms-ContextualMenu-item ms-ContextualMenu-item-- hasMenu">
            <a class="ms-ContextualMenu-link   " tabindex="1">ZZZ</a>
            <i class="ms-ContextualMenu-subMenuIcon ms-Icon ms-Icon--  ChevronRight">
            </i></li>
        </ul>
    </div>
    </li>
</ul>
<script type="text/javascript">
    var ButtonElement = document.querySelector(".ms-ContextualMenu-basic   .ms-Button");
    var ContextualMenuElement = document.querySelector(".ms-ContextualMenu-    basic .ms-ContextualMenu");
    var contextualMenu = new fabric['ContextualMenu'](ContextualMenuElement,   ButtonElement);
</script>

</body>

</html>
0

You are using document.querySelector , it will always chose your first. You could either specify them with a unique identifier or use querySelectorAll

var ContextualMenuElements = document.querySelectorAll(".ms-ContextualMenu-basic .ms-ContextualMenu");
var ButtonElements = document.querySelectorAll(".ms-ContextualMenu-basic .ms-Button");

    for (var i = 0; i < ButtonElements.length; i++) {
            new fabric['ContextualMenu'](ContextualMenuElements[i], ButtonElements[i]);
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.