search

rikulo / bootjack

Twitter Bootstrap ported in Dart.
https://quire.io
Apache License 2.0
88 stars 15 forks source link

Collaspe and navbar appear to be buggy #17

Open delaneyj opened 10 years ago

delaneyj commented 10 years ago

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>
delaneyj commented 10 years ago

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>