2

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.

5
  • very interesting issue..will be looking at it whenever I'm on machine.. Jul 15, 2015 at 14:28
  • did you find anything on this? Jul 19, 2015 at 10:07
  • @PankajParkar Nope, tried to write a directive which checks height on multiple things but the height always becomes incorrect. I'm not sure if bootstrap's grid system is what's causing it or if it's something else. Jul 19, 2015 at 10:19
  • Seeing something similar. Were you able to find a workaround?
    – AshD
    Jul 7, 2021 at 17:55
  • @AshD No idea. This was too long ago haha. Jul 8, 2021 at 7:47

1 Answer 1

1

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.

1
  • 1
    Still, answers are not comments. So please don't use them to give comments.
    – GhostCat
    Jan 17, 2017 at 20:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.