Collaspe and navbar appear to be buggy

Open delaneyj opened this issue 12 years ago • 1 comments

Was having issues with collapse not working properly so tried the one of the examples from Bootstrap 3.0 site. If you reduce the width of the browser the collapse button shows up but does not have proper click behavior (none at the moment). Also the navbar element is overlapping the container div below it; not sure if its related. Below is my modified version to work with bootjack/dart.

<!DOCTYPE html>
    <html>
      <head>
        <title>testCollaspe</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="packages/bootjack/css/bootstrap.css">
      </head>

      <body>   
        <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <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>
        </div>

        <div class="container">
          <div class="starter-template">
            <h1>Bootstrap starter template</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
          </div>
        </div><!-- /.container -->
        <script type="application/dart">
          import 'package:bootjack/bootjack.dart';
          main(){
            Bootjack.useDefault();
          }
        </script>
        <script src="packages/browser/dart.js"></script>
      </body>
    </html>

Jan 06 '14 02:01 delaneyj

The overlap was a css issue. Adding to head the following fix it. However collapse still seems to not be working properly like the javascript version.

<style>
    body {
        padding-top: 50px;
    }
    .starter-template {
        padding: 40px 15px;
        text-align: center;
    } 
</style>

Jan 06 '14 11:01 delaneyj