Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Collaspe and navbar appear to be buggy #17

Open
delaneyj opened this issue Jan 6, 2014 · 1 comment
Open

Collaspe and navbar appear to be buggy #17

delaneyj opened this issue Jan 6, 2014 · 1 comment

Comments

@delaneyj
Copy link

delaneyj commented Jan 6, 2014

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
Copy link
Author

delaneyj commented Jan 6, 2014

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@delaneyj