CODEWITHSUNDEEP
htmlcss
popeye
popeye

Reputation: 291

Contents of scrollable div scrolls above the nav bar

I have a webpage where the having the current layout is important to me. The layout has a navbar + 3 column body and a fullwidth bar at the bottom. On the right handside column of my body I have a ul li list. This list is long and hence will scroll within the window. Whenever I scroll the list, it scrolls above the navbar. I have tried setting the position to fixed and relative alternatively. But none worked. Can someone help?

The following is the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- View meta tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
      DEMO
    </title>

    <!-- Color CSS Styles  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <script src="https://use.fontawesome.com/f87c84f770.js"></script>

    <style type="text/css">
      body, html,  .sidebar, .centerPanel .rhsbar1{
      height: 88%;
      }

      #container{
          width:100%;
          height:100%;
          /* position:absolute; */
          }

      .sidebar{ 
          width:25%;
          float:left;
          height:100%;
          border-right: solid 6px #f1ded9;
          overflow-y: auto;
          }

      .centerPanel {
          background-color: white;
          float:left;
          width:50%;
          height:100%;
          }

      .rhsbar1{
          background-color: white;
          float:right;
          width:25%;
          height:100%;
          border-left: solid 6px #f1ded9;
          overflow-y: auto;
          }

      .navbar {
          height: 20px;
          position: absolute;
          background-color: black;
          width:100%;
          border-bottom: solid 6px #f1ded9;
          }

      #loaded_img_panel  {
          display:block;
          height: 200px;
          position: relative;
          background-color: white;
          overflow: auto;
          white-space: nowrap;
          border-top: solid 6px #f1ded9;
          }

.rhsbar1 .tab {
    overflow-y: auto;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.rhsbar1 .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 5px 5px;
    transition: 0.3s;
    font-size: 12px;
}

/* Change background color of buttons on hover */
.rhsbar1 .tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.rhsbar1 .tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.rhsbar1 .tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
}

</style>

</head>
<body>

    <div class="navbar">
    </div>

    <div id="container">

        <div class="sidebar">
        </div>

        <div class="centerPanel">
        </div>

        <div class="rhsbar1">  
          <div class="tab" style="position:fixed;margin:50px 0 0 0;">
              <button class="tablinks" onclick="openActivity(event, 'annotateDirectories')" >Annotate</button>  
            </div>

            <div id="annotateDirectories" class="tabcontent" style="position:relative;margin:60px 0 0 0;">
             <ul>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
              <li>Test</li>
              <li>Test</li>
              <li><ul>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
                <li>TestMessage</li>
              </ul></li>
             </ul>
            </div>
            <script>
              function openActivity(evt, activeWin) {
                  var i, tabcontent, tablinks;
                  tabcontent = document.getElementsByClassName("tabcontent");
                  for (i = 0; i < tabcontent.length; i++) {
                      tabcontent[i].style.display = "none";
                  }
                  tablinks = document.getElementsByClassName("tablinks");
                  for (i = 0; i < tablinks.length; i++) {
                      tablinks[i].className = tablinks[i].className.replace(" active", "");
                  }
                  document.getElementById(activeWin).style.display = "block";
                  evt.currentTarget.className += " active";
              }
            </script>
        </div>      
      </div>
        <div id="loaded_img_panel" name="loaded_img_panel" >           
        </div>
</body>
</html>

Upvotes: 0

Views: 83

Answers (3)

msd117
msd117

Reputation: 386

Change this class in your CSS:

  .navbar {
          height: 20px;
          background-color: black;
          width:100%;
          border-bottom: solid 6px #f1ded9;
          }

Just remove this line:

position: absolute;

Upvotes: 2

Rupal
Rupal

Reputation: 1109

Add z-index in your navbar

.navbar{
z-index:999;
}

Upvotes: 2

user9231047
user9231047

Reputation:

I see you have used sources from different websites; It could be from one of them that is causing the trouble.

I can make a guess that is:

put the list inside of a div

<div id="List">
List_items
</div>

Then in css:

 #List {
 width: how_wide_the_nav_section_is px;
 height: how_high_the_nav_section_is px;
 }

I hope this works.

Upvotes: 0

Related Questions