Bootstrap 3.0 - Collapse

by GlittenBerg

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div style="width: 100vw; height: 100vh">
  <div id="canvas">
    <div class="inner-canvas">
      CANVAS
    </div>

  </div>
  <div class="sidepalette">



    <div class="panel-group" id="accordion">
      <div class="panel panel-default" id="panel1">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
              Collapsible Group Item #1
            </a>
          </h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
          <div class="panel-body">
            <div>
              Dropdow-menu
              <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>

                </button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                  <li><a href="#">Item 1</a>

                  </li>
                  <li><a href="#">Another item</a>

                  </li>
                  <li><a href="#">This is a longer item that will not fit properly</a>

                  </li>
                </ul>
              </div>
            </div>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan...

CSS

#canvas {
  width: calc(100vw - 480px);
  background-color: cyan;
  height: 100vh;
  position: absolute;

}

.inner-canvas {
  display: inline-block;
  font-size: 52px;
  font-weight: bold;
  vertical-align: middle;
  margin: 0 auto;
}

.sidepalette {
  position: absolute;
  width: 480px;
  height: 100vh;
  right: 0;
  overflow: hidden;
  background-color: yellowgreen;
  padding: 0 10px;

}
.dropdown-menu-right {
    left: auto;
    right: 0;
}

JavaScript

(function() {
  // hold onto the drop down menu 
  var dropdownMenu;
  // and when you show it, move it to the body                                     
  $(window).on('show.bs.dropdown', function(e) {
    // grab the menu        
    dropdownMenu = $(e.target).find('.dropdown-menu');

    // detach it and append it to the body
    $('body').append(dropdownMenu.detach());
    // grab the new offset position
		 var eWidth = $(e.target).width();
    var eOffset = $(e.target).offset();
    if (dropdownMenu.hasClass(".dropdown-menu-right")) {
      console.log(eOffset.left, eWidth);
      dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': 'auto',
        'right': eOffset.right
        
      });

    } else {
      dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left

      });

    }
    // make sure to place it where it would normally go (this could be improved)

  });

  // and when you hide it, reattach the drop down, and hide it normally                                                   
  $(window).on('hide.bs.dropdown', function(e) {
    $(e.target).append(dropdownMenu.detach());
    dropdownMenu.hide();
  });
})();