When I paste the below code into a Content Editor WP on SP2016 or SPO it seems to be fine, looks nice and I get no js errors while running it. But on clicking the button, the panel displays for a short while - then disappears again. It never sticks and the page its hosted on seems to refresh.

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>

<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Add site</span> 
  <div class="ms-Panel">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Settings</p>
      <div class="ms-Panel-content">
        <div class="ms-TextField">
          <label class="ms-Label">Title</label>
          <input class="ms-TextField-field" type="text" value="" placeholder="">
        <div class="ms-Toggle">
          <span class="ms-Toggle-description">Open?</span> 
          <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
          <label for="demo-toggle-3" class="ms-Toggle-field is-selected" tabindex="0">
            <span class="ms-Label ms-Label--off">No</span> 
            <span class="ms-Label ms-Label--on">Yes</span> 
        <button class="ms-Button">
            <span class="ms-Button-label">Create site</span> 

<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);

<script type="text/javascript">
  var ToggleElements = document.querySelectorAll(".ms-Toggle");
  for (var i = 0; i < ToggleElements.length; i++) {
    new fabric['Toggle'](ToggleElements[i]);
  • Figured it out, it was simply a matter of preventing the trigger button from doing it's default postback – Roger Oct 4 '17 at 9:48

Figured it out - it was simply a matter of preventing the trigger button from firing it's default postback

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.