search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.14k stars 78.78k forks source link

Off Canvas Does Not Show Full-Height Sidebar #15523

Closed aagouda closed 9 years ago

aagouda commented 9 years ago

I am trying to use Bootstrap off canvas left side bar to toggle on small devices.

Here is the bootply code example:

http://www.bootply.com/C2wQEkdSAn

The problem when displaying on mobile when you click on the accordion the contents are not pushing the footer down but hides behind it.

I have also this SO question with no answers until now

Here is the full code also to reproduce this:

<!doctype html> <html lang="en">  <head>

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<style> /*a  * Style tweaks  *
--------------------------------------------------  */ body {   padding-top: 70px; } footer {   padding-left: 15px;   padding-right: 15px; }

/*  * Off Canvas  * --------------------------------------------------
*/ @media screen and (max-width: 768px) {   .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;   }

  .row-offcanvas-left   .sidebar-offcanvas {
    left: -50%;   }

  .row-offcanvas-left.active {
    left: 50%;   }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    margin-left: 12px;   } } </style>

 </head>  <body>    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">   <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!-- /.nav-collapse -->   </div><!-- /.container --> </div><!-- /.navbar -->

<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">

       <p class="visible-xs">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
      </p>

      <div class="well sidebar-nav">
        <ul class="nav">
          <li>Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li>Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li>Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>

        <div class="accordion" id="accordion2">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                        Collapsible Group Item #1
                    </a>
                </div>
                <div id="collapseOne" class="accordion-body collapse">
                    <div class="accordion-inner">
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                        Collapsible Group Item #2
                    </a>
                </div>
                <div id="collapseTwo" class="accordion-body collapse">
                    <div class="accordion-inner">
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                        Sidebar text...<br>
                    </div>
                </div>
            </div>
        </div>

      </div><!--/.well -->
    </div><!--/span-->

    <div class="col-xs-12 col-sm-9">
      <p class="pull-left 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-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript. Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. </p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <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="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
        <div class="col-6 col-sm-6 col-lg-4">
          <h2>Heading</h2>
          <p>Bootstrap is a front-end framework that uses CSS and JavaScript to facilitate responsive Web design. Bootply is a playground for Bootstrap that enables developers and designers to test, prototype and create mockups using Bootstrap friendly HTML, CSS and Javascript.</p>
          <p><a class="btn btn-default" href="#">View details »</a></p>
        </div><!--/span-->
      </div><!--/row-->
    </div><!--/span-->

       </div><!--/row-->

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

<div class="">
    <nav class="navbar navbar-inverse navbar-sticky-bottom" role="navigation">
        <div class="row" style="padding-top:1em;">

            <div class="col-md-3 col-sm-6 col-xs-12">
                <ul class="list-unstyled">
                    <li><a href="#"> Home</a></li>
                    <li><a href="#" class="navbar-link"> Ccontact_us</a></li>
                    <li><a href="#" class="navbar-link"> Announcements</a></li>
                    <li><a href="#" class="navbar-link"> About_us</a></li>
                </ul>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">

            Text and links

            </div>

             <div class="col-md-3 col-sm-6 col-xs-12">
                <p class="navbar-text">Text and links</p>
            </div>

            <div class="col-md-3 col-sm-6 col-xs-12">
                <p class="navbar-text">copyright</p>
            </div>

        </div><!--row-->    
    </nav> </div>

<script> $(document).ready(function() {
    $('[data-toggle=offcanvas]').click(function() {
        $('.row-offcanvas').toggleClass('active');
    }); }); </script>

 </body> </html>

screenshot

cvrebert commented 9 years ago

Reposting the URL just to trigger Bootlint: http://www.bootply.com/C2wQEkdSAn

twbs-lmvtfy commented 9 years ago

Hi @cvrebert!

You appear to have posted a live example (http://s.bootply.com/render/C2wQEkdSAn), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

You'll need to fix these errors and post a revised example before we can proceed further. Thanks!

(Please note that this is a fully automated comment.)

cvrebert commented 9 years ago

@mewsoft Please fix the above E014 issues in your example ^^^

cvrebert commented 9 years ago

(There's no row-fluid class in Bootstrap v3; it's just row)

mdo commented 9 years ago

For the time being, I don't think there's much we'll be doing here. The example is made available as-is. Modifications to it will need more modifications to keep the offcanvas functionality.