Twitter Bootstrap Question posted in

Twitter bootstrap – Directive inside partial appears with a bar on top

I am creating an UI using Angular on the front end. I have a directive which is the navbar. Since I am using ngRoute, I have used that directive inside my partial for /home. Everything works fine, but the navbar does not start from the top of the page. Instead there is a small pane below which the navbar starts. I want it to be something like how the stack overflow navbar in the top is.

This is my index.html

<body>
<ng-view></ng-view>
</body>

I’ve tried by using ng-view inside div but still it does not work.

home.html

<nav-bar></nav-bar>
<div class="container">
        <div class="row-fluid">
            <div class="col-md-12">
                <div class="well well-sm">{{flashMessage}}</div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="col-md-3 well pre-scrollable scroll-pane">
                <span class="glyphicon glyphicon-folder-close"></span>
                <a href="#toparentnode">
                    ..
                </a>
                <br/>
                <p>nodes list goes here</p>
            </div>
            <div class="col-md-9 pre-scrollable scroll-pane">
                <table class="table table-striped table-bordered wrap-table text-center">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Value1</td>
                            <td>
                                <button class="glyphicon glyphicon-edit"></button>
                                <button class="glyphicon glyphicon-remove"></button>
                            </td>
                        </tr>
                        <tr>
                            <td>Value2</td>
                            <td>
                                <button class="glyphicon glyphicon-edit"></button>
                                <button class="glyphicon glyphicon-remove"></button>
                            </td>
                        </tr>
                        <tr>
                            <td>Value3</td>
                            <td>
                                <button class="glyphicon glyphicon-edit"></button>
                                <button class="glyphicon glyphicon-remove"></button>
                            </td>
                        </tr>
                        <tr>
                            <td>Value4</td>
                            <td>
                                <button class="glyphicon glyphicon-edit"></button>
                                <button class="glyphicon glyphicon-remove"></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

navbar.html ( which is the templateUrl for navBar directive )

<nav class="navbar navbar-default navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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 navbar-right" href="#/">
            <img style="max-width:100px; margin-top: -7px;" src="images/logo.png" alt="Logo"> 
            </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#/home"><span class="glyphicon glyphicon-home"></span> Home<span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

I have used Twitter bootstrap and one css named signin.css which is one found in the official website example – css

This is the unnecessary pane in the top
enter image description here

But I want it to look like how stack overflow has the navbar.

I’ve tried adding the navbar directly to the main index.html and it works as expected. This unnecessary pane appears only when I use it as a directive. Hope my question is clear.

Tags:

2

Answers


  1. 0

    from CSS try removing 

    body {
 padding-top: 40px;
}
    Login or Signup to reply.
  2. 0

    ViChU Hi there.
    Can you give this a try to see if it helps you here.

    Add navbar-fixed-top

    <nav class="navbar navbar-inverse navbar-fixed-top ">

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search