Bootstrap Off Canvas - if content less than sidebar messed up scrolling

Question

I am using Bootstrap's 3.2.0 Off Canvas layout located at - http://getbootstrap.com/examples/offcanvas/

I know this is a common issue that if the content of the sidebar is longer than the content of the main container that the scroll bar no longer scrolls the content properly (both sidebar and main) but cuts off the sidebar and also places the scrollbar below the navbar.

I can reproduce this problem by taking the above template and adding additional links to the sidebar while putting less content in the main container, example:

<div class="container">

    <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
            <p class="pull-right visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
            </p>
            <div class="jumbotron">
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
            </div>
            <div class="row">
                <div class="col-12 col-sm-12 col-lg-12">
                    <h2>Heading</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                </div><!--/span-->
            </div><!--/row-->
        </div><!--/span-->

        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="list-group">
                <a href="#" class="list-group-item active">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>     
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item active">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
            </div>
            <div class="list-group">
                <a href="#" class="list-group-item active">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
                <a href="#" class="list-group-item">Link</a>
            </div>
        </div><!--/span-->
    </div><!--/row-->

    <hr>

    <footer>
        <p>&copy; Company 2014</p>
    </footer>

</div><!--/.container-->

Is there anyway to reliably have the sidebar working no matter how long the main content is?

Can you recreate your issue with the following JSFiddle? Just hit Update at the top when your done and re-comment with it: http://jsfiddle.net/L83JB/1/ — BuddhistBeast, Jul 05 '14 at 02:18

Fouad · Answer 1 · 2014-10-02T12:33:59.223

2

a quick fix in offcanvas.j:

jQuery('[data-toggle=offcanvas]').click(function () {

// add this line to change the position of sidebar
jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") :        jQuery('.sidebar-offcanvas').css("position","relative");  
// end modif      

jQuery('.row-offcanvas').toggleClass('active')
});

edited Oct 02 '14 at 12:33

answered Oct 02 '14 at 12:12

Fouad

21
5

I have same question http://stackoverflow.com/questions/27766900/bootstrap-off-canvas-show-full-height and this solution just wraps the content column to the bottom. – daliaessam Jan 08 '15 at 19:18

score 1 · Answer 2 · answered Jun 06 '15 at 20:50

I've encountered this exact problem. After trying many workarounds, I simply found out that removing double overflow-x worked for me.

So simply remove either body or html from:

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

I preferred to keep body.

Ahsan Habib · Answer 3 · 2016-02-09T20:37:44.670

Here is the HTML Structure we have to follow:-

            <div class="container">

                <div class="row row-offcanvas row-offcanvas-left">

                    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
                        <ul>
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                          </ul>
                    </div>

                    <div class="col-xs-12 col-sm-9 content-div">
                        <p class="pull-left hide-p visible-xs">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
                  </p>
                    </div>
                </div>
            </div>

That's the css

 <style>
     .postion{
    position:relative;
    margin-left:-50%;
}
    </style>

Jquery code will be like this.

    <script type="text/javascript">
        $(document).ready(function () {

          jQuery('[data-toggle=offcanvas]').click(function () {

        // add this line to change the position of sidebar
        jQuery('.row-offcanvas').hasClass( "active" ) ? jQuery('.sidebar-offcanvas').css("position","absolute") :        jQuery('.sidebar-offcanvas').css("position","relative");  
        // end modif      

        $(".content-div").toggleClass("postion");


        jQuery('.row-offcanvas').toggleClass('active')
        });


        });
    </script>

So that's what we have to use. Now i am explaining the thing.When we click button the offcanvas div will add css position relative. And the other content div will toggle a class which css will be position:relative; margin-left:-50%;

I made both type of offcanvas left to right and right to left. If you want you can download those 2 code from my dropbox. Thank you.

https://www.dropbox.com/s/w5x4668edczif44/Bootstarap.zip?dl=0

You really ought to explain your code and clarify how it answers the OPs question rather than just pasting it in without any explanation — Stewart_R, Feb 07 '16 at 23:06
Sorry i never post answer in here. I just solve this problem that's why i post my full code. Ok i am editing my code and try to explain it. — Ahsan Habib, Feb 08 '16 at 22:51

Bootstrap Off Canvas - if content less than sidebar messed up scrolling

3 Answers3

Linked