CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
DKay
DKay

Reputation: 53

Bootstrap issue, dropdown menu is hidden behind another element

I'm newbie in developing using bootstrap framework and I've faced problem that I'm unable to workaround.

I need to create page which consists from two parts: navigation part, content part. Content part should be scrollable and it consists from some generated data (javascript), so here is code:

function loaddata() {
"use strict";
var i, divMain, divContent;
divMain = document.getElementById("data");
	for (i = 0; i < 100; i += 1)
  {
  	divContent = document.createElement("div");
    divContent.setAttribute("id", "div_content" + i);
    divContent.innerHTML += "Some data " + i;
    divMain.appendChild(divContent);
  }
}
html, body
{
  overflow-y: hidden;
}
#data
{
  position: absolute;
  width: 100%;
  height: 95%;
  overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body  onload="loaddata()">
  <div class="nav">
    <div class='btn-group' role='group' aria-label='...'>
      <button class='btn btn-default'>Button 1</button>
      <button class='btn btn-default'>Button 2</button>
        <div class='btn-group'>
          <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Button 3</button>
          <ul class='dropdown-menu'>
          <li><input type='checkbox' checked>Value 1</li>
          <li><input type='checkbox' checked>Value 2</li>
          <li><input type='checkbox' checked>Value 3</li>
          </ul>
       </div>
    </div>
    <div>Some text..............................................</div>
    <div>Some text..............................................</div>
  </div>
  <div id="data">
  </div>
</body>

I'm able to fix the problem with hidden drop-down by changing position property of data div to non fixed or absolute, but in this case data isn't scrollable.

Fiddle

Please point me to right solution.

Upvotes: 0

Views: 564

Answers (1)

Syden
Syden

Reputation: 8625

Edit based on comment:

Set .nav fixed:

function loaddata() {
  "use strict";
  var i, divMain, divContent;
  divMain = document.getElementById("data");
  for (i = 0; i < 100; i += 1) {
    divContent = document.createElement("div");
    divContent.setAttribute("id", "div_content" + i);
    divContent.innerHTML += "Some data " + i;
    divMain.appendChild(divContent);
  }
}
html,
body {
  overflow-y: auto;
}
#data {
  margin-top: 40px;
  width: 100%;
  height: 95%;
  /*overflow-y: scroll;*/
}
.nav {
  position: fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body onload="loaddata()">
  <div class="nav">
    <div class='btn-group' role='group' aria-label='...'>
      <button class='btn btn-default'>Button 1</button>
      <button class='btn btn-default'>Button 2</button>
      <div class='btn-group'>
        <button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Button 3</button>
        <ul class='dropdown-menu'>
          <li>
            <input type='checkbox' checked>Value 1</li>
          <li>
            <input type='checkbox' checked>Value 2</li>
          <li>
            <input type='checkbox' checked>Value 3</li>
        </ul>
      </div>
    </div>
  </div>
  <div id="data">
  </div>
</body>

Upvotes: 1

Related Questions