CODEWITHSUNDEEP
jqueryangularjsheightdirective
Chrillewoodz
Chrillewoodz

Reputation: 28368

Unable to get the correct height of element

I've got a directive whos purpose is to set a child's height to be equal to the parent.

I can not use height: inherit; or height: 100%; for this.

The problem is that the outerHeight(true) returns the wrong height no matter what I do. The height that it returns it 175 when is should be closer to around 720, which to me doesn't make any sense whatsoever..

Here's a plunkr: http://plnkr.co/edit/7TeTrw9RsTgR7mfzzDg0?p=preview, I didn't manage to get the directive to run in it though. Had the same issue in the jsFiddle, not sure what I'm doing wrong there but I hope someone knows how to fix it and can play around in it.

I've used outerHeight(), outerHeight(true), height() and .css('height') but all of them returns 175 as the height.

EDIT: I even tried a third-party plugin that sets the columns as equal height, but that plugin also got the wrong height.

EDIT 2: I also found out that it is in fact working, but only after you've resized the window.. Is the directive being run before the element has gotten its height or something?

EDIT 3: I found a working solution but it's not optimal as it causes a delay of 200ms, therefore causing the element to jump down once it executes:

core.directive('heightInheritance', ['$timeout', function($timeout) {

  return {
    restrict: 'A', 
    link: function(scope, element, attrs) {

      $timeout(function(){

        var parentHeight = element.parent().outerHeight(true);

        element.css('height', parentHeight + 'px');

        $(window).resize(function() {

          parentHeight = element.parent().outerHeight(true);

          element.css('height', parentHeight + 'px');

          console.log(element.parent().css('height'));
        });

      }, 200);
    }
  }
}]);

This solution came from here: How can I run a directive after the dom has finished rendering?

However, that suggests that you should do it without a delay, but as soon as I go under 200ms I get the same result as before. I figured I would cause a delay in the route itself but that did nothing to solve the issue either unfortunately. Is there any way I can remove the delay here?

I've looked at these questions:

How to calculate element's width and height with their padding / margin values using less code?

jquery: wrong values when trying to get div height

jQuery height() returning false values

But they all says the same thing basically, and their answers aren't working.

Here's my directive:

core.directive('heightInheritance', [function() {

  return {
    restrict: 'A', 
    link: function(scope, element, attrs) {

      var parentHeight = element.parent().outerHeight(true);

      element.css('height', parentHeight + 'px');
    }
  }
}]);

The height is based off an image which sets the height of the left column. By using Bootstrap's row-eq-height class it will make all the direct columns the same height. This is working correctly but now I need to make a .row inside of the right column to inherit the height of the right column. 

<div class="row row-eq-height">
  <div class="col-sm-1 col-lg-2 hidden-xs"></div>
  <div class="col-xs-12 col-sm-4 col-lg-3">
    <img ng-src="somepath" class="image"> <!-- sets the height of the col -->
  </div>
  <div class="col-lg-5">
    <div data-height-inheritance class="row"> <!-- need this to inherit height from parent -->
      <div class="col-sm-1"></div>
      <div data-height-inheritance class="col-sm-10"></div>
      <div class="col-sm-1"></div>
    </div>
  </div>
</div>

What could be causing this issue? I don't know what else to do here.

Upvotes: 2

Views: 1052

Answers (1)

willjohnathan
willjohnathan

Reputation: 300

I don't have enough reputation to just add a comment, but have you tried adding style="overflow-y:hidden" to the parent element prior to getting the height (you can reset it afterwards). I have had issues where the overflow affected the js height values.

Upvotes: 1

Related Questions