I'm new in bootstrap and angularJS.
but I'm building page where top and left side page will be static not moving.
I use <nav class="navbar navbar-default navbar-fixed-top from bootstrap to header and position: fixed to have static left part of the page.
Problem is the navibar is create dynamically and height depend on data from database (these are the filters), so the result I have my header and in the content some data are not visible because navbar cover it.
How it resolve? Maybe navbar is not good approach.
I would do this with two directives. One which monitors the elements (in your case navbar) height and one which change the css padding (or whatever you want) depending on the new height.
.directive('getHeight', function() {
var addPadding = 10;
return {
link: function(scope, element, attrs) {
scope.$watch( 'watchedHeight', function(newHeight) {
element.css({
'padding-top': newHeight+addPadding+'px'
});
});
}
}
})
.directive('watchHeight', function($rootScope) {
return {
link: function(scope, element, attrs) {
scope.$watch(function() {
scope.watchedHeight = element[0].offsetHeight;
});
angular.element(window).on('resize', function() {
$rootScope.$apply(function() {
scope.watchedHeight = element[0].offsetHeight;
})
});
}
}
});
HTML:
<body ng-app="myApp" ng-controller="TestCtrl" get-height="">
<nav class="navbar navbar-default navbar-fixed-top" watch-height="">
<div class="container">
<p class="navbar-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>
</div>
</nav>
<div class="container">
Lorem ipsum dolor sit amet...
</div>
</body>
I also monitor the window resizing, don't know if it's needed in your case.