mithrandir mithrandir - 3 months ago 19
AngularJS Question

Bootstrap 3 navbar-fixed-top overlaps with content

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>

Answer

Add this in your style

 body{
   margin-top:70px;
 }
 @media(max-width: 768px){
   body{
     margin-top:180px;
    }
 }
Comments