CODEWITHSUNDEEP
htmltwitter-bootstrap-3
Ying Rui Wong
Ying Rui Wong

Reputation: 113

Bootstrap: Fixed left nav but able to scroll

I have a left nav and overflow the page already.
What I want to do is the nav won't be able to overflow but it can be scroll and my content <div> won't be affected.
But I don't want to use iframe.
Is it possible to do?

This is my bootply code link
Similar with this example, but I want the "side" nav can be scroll also(if you resize it become smaller)

<script type="text/javascript">
$(function(){
  $('#sidebar').affix({
   offset: {
     top: $('header').outerHeight(true),
     bottom: $('footer').outerHeight(true)
   }
  });
</script>



<nav class="navbar navbar-default" role="navigation" >
  <ul class="nav nav-stacked" id="sidebar" >
    <?php 
        $groupInfo = $_SESSION['base_u_ldapGroup'];
        // print_r( $groupInfo);
        base_generateMenuBar($groupInfo) 
    ?>
  </ul>
</nav>

Upvotes: 1

Views: 2909

Answers (2)

gavgrif
gavgrif

Reputation: 15509

another way to do it is to have two divs - with different overflow settings as so:

Place the sidebar inside a parent div. set the parent div to overflow hidden and the inner div to overflow auto. Make the parent div slightly skinnier than the inner div so that the scroll bar from the inner div is not shown. if created dynamically, simply set the width at time of rendering using jQuery or other js. Note that the following is a demo and not related to your sizings / sidebar etc - just to show that you can have a scrollable div without a scrollbar.

.parentDiv
    {
        width: 301px;
        height: 450px;
        overflow: hidden;
    }

.parentDiv .innerDiv
    {
        width: 320px;
        height: 450px;
        overflow: auto; 
    }

ps:- i just put this together to show the effect. Note that it sets the width in the css for both divs. The effect as such does not require JS or JQuery, however setting style rules dynamically will. Or use php and load the widths at the page load / render. You mght investgate "calc" for the css, but I dont know how well that is supported in different browsers. Alternatively - use percentages for the css, just make the parent div skinner than the nner div.

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <title>Scrollable Div Test</title>
    <meta charset="UTF-8" />
        <style>
    	.parentDiv
        {;
            width: 301px;
            height: 450px;
            overflow: hidden;
        }
    
    .parentDiv .innerDiv
        {
            width: 320px;
            height: 450px;
            overflow: auto; 
        }  
    
        </style>
    </head>
    
    <body>
    
    <div class="parentDiv"/>
    	<div class="innerDiv"/>
  <p>scroll this list<p>
    		<ul>
    			<li>a</li>
    			<li>b</li>
    			<li>c</li>
    			<li>d</li>
    			<li>e</li>
    			<li>f</li>
    			<li>g</li>
    			<li>h</li>
    			<li>i</li>
    			<li>j</li>
    			<li>k</li>
    			<li>l</li>
    			<li>m</li>
    			<li>n</li>
    			<li>o</li>
    			<li>p</li>
    			<li>q</li>
    			<li>r</li>
    			<li>s</li>
    			<li>t</li>
    			<li>u</li>
    			<li>v</li>
    			<li>w</li>
    			<li>x</li>
    			<li>y</li>
    			<li>z</li>
    		</ul>
    	</div>
    </div>
    </body>
    </html>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15509

In the CSS, set the overflow to scroll on the y axis?

#sidebar{overflow-y:scroll}

or set it to auto if you don't want the scroll bar present all the time

#sidebar{overflow-y:auto}

Upvotes: 0

Related Questions