Twitter Bootstrap Question posted in

Bootstrap 3 navbar-fixed-top overlaps with content – Twitter bootstrap

I am using Bootstrap 3 to create a page that contains a navbar which needs to be fixed (navbar-fixed-top) and a table below. The table is displayed correctly when I just use navbar-default. As soon as I add navbar-fixed-top, the table header seems to go under the navbar. Anything I am missing here ? The sample is available in Plnkr as well : http://plnkr.co/edit/cNVjIDI6C4vOKMHVWWrT?p=preview

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>Interaction Summary Comparision View</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></link>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.8.1/angular-spinner.min.js"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-loading-spinner/master/angular-loading-spinner.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.5.2/restangular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>

    <style>
        .full button span {
            background-color: limegreen;
            border-radius: 32px;
            color: black;
        }

        .partially button span {
            background-color: orange;
            border-radius: 32px;
            color: black;
        }
    </style>

    <!-- Angular logic -->
    <script>
        // Angular App
        var app = angular.module('myApp', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'restangular', 'ngLoadingSpinner']);

        app.factory('dataService', function($http, Restangular) {

            var exports = {};

            exports.getRestangular = function() {
                return Restangular.setBaseUrl("https://cdn.rawgit.com/venkyvb/164b6c12a4f8bc72a02b12234a32bc9c/raw/daa51de397e90387ef51e07e25e971f24c667d0c");
            }

            exports.getData = function() {
                return exports.getRestangular().all("summary.json").getList();
            }

            return exports;
        });

        // Controllers  
        app.controller('SummaryController', function($scope, $rootScope, $filter, dataService) {
            $scope.summary = [];

            dataService.getData().then(function(data) {
                    $scope.summary = data.plain();
                },
                function(data) {
                    // Error
                });

            $scope.downloadCsv = function() {
                window.open('data:text/csv;charset=utf-8,' + escape(Papa.unparse(angular.toJson($scope.summary))));
            };

        });


        app.config(function($stateProvider, $urlRouterProvider) {

            $urlRouterProvider.otherwise('/');

            var summaryList = {
                name: 'SummaryList',
                url: '/',
                templateUrl: '/summary_list.html',
                controller: 'SummaryController',
            };

            $stateProvider.state(summaryList);

        });
    </script>
    <!-- Templates -->
    <script type="text/ng-template" id="/summary_list.html">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <nav class="navbar navbar-default navbar-fixed-top">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <a class="navbar-brand" href="#">Summary View</a>
                            </div>
                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="#" ng-click="downloadCsv()"><span class="glyphicon glyphicon-download-alt" title="Download CSV"></span></a>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-right">
                                <div class="form-group">
                                    <input type="text" class="search form-control" ng-model="search.$" placeholder="Search in table">
                                </div>
                            </form>
                        </div>
                    </nav>
                </div>
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <table class="table table-hover" ts-wrapper>
                                <thead>
                                    <th>E2E time</th>
                                    <th>Server time</th>
                                    <th>Step</th>
                                    <th>Total</th>
                                </thead>
                                <tr ng-repeat="entry in summary | filter:search" ts-repeat>
                                    <td>{{ entry.e2e_time }}</td>
                                    <td>{{ entry.server_time }}</td>
                                    <td>{{ entry.step }}</td>
                                    <td>{{ entry.total_transactions }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>

</head>

<body>
    <div class="container-fluid">
        <span us-spinner="{radius:30, width:8, length: 16}"></span>
        <div data-ui-view></div>
    </div>
</body>

</html>
Tags:

4

Answers


  1. 0

    Sadly, bootstrap 3 never included a padding or a margin when you make a navbar fixed. So you should do it manually.

    Login or Signup to reply.
  2. 0

    You must use margin-top style on your table

    Login or Signup to reply.
  3. 0 
    .col-sm-12 {
    width: 100%;
    margin-top: 3%;
}

    This would give some margin!

    Login or Signup to reply.
  4. 0

    Add this in your style

     body{
   margin-top:70px;
 }
 @media(max-width: 768px){
   body{
     margin-top:180px;
    }
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search