datetime picker base (v4)

by nilgundag

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css">
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
<div class="left-pane">

  <div class="form-group">
    <div class='input-group date' id='datetimepicker1'>
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>

  <nav id="base">Menu 1
        <div id="mydrop">
          <span>Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1</span><br/>
                  <span>Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1</span><br/>
                  <span>Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1</span><br/>
                  <span>Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1 Sub Menu 1</span><br/>
        </div>
  </nav>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd asdasd</div>
  <div>asdasdasda asdasd...

CSS

html, body {
  height: 100%;
}

.left-pane {
	float: left;
	width: 25.333333%;
	box-sizing: border-box;
	overflow-x: visible;
  overflow-y: auto; /* problem */
	background-color: red;
	position: relative;
	height: 100%;
  position: relative;
  z-index: 4;
}

.right-pane {
	float: left;
	width: 74.666666%;
	position: relative;
	height: 100%;
  background-color: blue;
  z-index: 1;
}
.form-group {
  /*display: none;*/
}

#base
{
	position:relative;
}
#mydrop
{
	display:none;
	position:absolute;
  background-color: green;
}

#base:hover > div
{
	display:block;
  min-width: 800px;
  z-index: 10;
}

JavaScript

$(function () {
  $('#datetimepicker1').datetimepicker({
    sideBySide: true,
    widgetPositioning: {
      horizontal: 'left',
      vertical: 'auto'
    }
  });
});