AngularJS getting & setting element height

Question

I am trying to do the following where bootstrap style is being applied. navbar-fixed-top bring that element position to be fixed at top. #subnav will show or hide depend on showsubnav value.

<div id="backnav">
    <div id="topnav" class="container-fluid navbar-fixed-top">
        <nav id="mainnav" class="navbar navbar-default"></nav>
        <nav id="subnav" class="navbar navbar-inverse" ng-show="showsubnav"></nav>
    </div>
</div>

http://jsfiddle.net/20f02378/

How can I have the #backnav height to be the same as #topnav?

You aren't showing enough information. It's possible this is something that could be done with CSS, and it might already be the same height, it's impossible to tell. Make a plunker or something. — ribsies, Feb 06 '15 at 02:45
@ribsies If there is no `navbar-fixed-top` class applied, it is same height. But once it is applied, it is floating and the height is not the same. — user1995781, Feb 06 '15 at 02:47
@ribsies I have add my code to http://jsfiddle.net/20f02378/ — user1995781, Feb 06 '15 at 03:30
What is the desired output you are looking for?. If you reverse the position of backnav and topnav, both will have the same height. But in that case red will be outside and blue will be inside. Since you have specified navbar-fixed-top, let it be at the top. I mean this. — paje007, Feb 06 '15 at 04:04
@paje007 My main purpose is to use `#backnav` to push the content down so that is it not at the back of the navbar. I don't think switching them would help. — user1995781, Feb 06 '15 at 04:13
For that just wrap the content in another container.

Lorem ipsum dolor sit amet, .... — paje007, Feb 06 '15 at 04:44

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

The problem with what you want to achieve falls under this question Fixed position but relative to container

Getting the height of the element wont help you unless you intend to add a padding to the top of the content you wish to push down, or override the CSS. However, to answer the question, to get the height of an element:

var height = angular.element('#backnav').height();

edited May 23 '17 at 12:12

Community

1
1

answered Feb 06 '15 at 04:33

David Parlevliet

502
3
6

score 0 · Answer 2 · answered Feb 07 '15 at 04:29

As I had commented, you can achieve this using ngStyle. Here is a solution.

<div ng-style="myStyle" ng-controller="MainController">
    <div id="topnav" class="container-fluid navbar-fixed-top">
        <nav id="mainnav" class="navbar navbar-default"> 
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
            </ul>
        </nav>
        <nav id="subnav" class="navbar navbar-inverse" ng-show="Config.showsubnav">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
            </ul>
        </nav>
    </div>
</div>

And in the controller

app.controller('MainController', ['$scope','Config', function($scope,Config){
$scope.Config = Config;
$scope.myStyle={};
$scope.myStyle.border="1px solid blue";
$scope.myStyle.height="59px";  
if(Config.showsubnav)
{
    $scope.myStyle.height="118px";  
}
}]);

I hope, this is what you were looking for. http://jsfiddle.net/paje007/a7n2xtad/

AngularJS getting & setting element height

2 Answers2