Problems in getting elements outerHeight in IE Edge using jQuery

Question

Problems in getting elements outerHeight in IE Edge using jQuery

307 Views Asked by Jimbo Jambo At 14 August 2020 at 12:28

I have a couple of elements inside a preview <div>. I need to add up their outerHeights (NOT the total height of the preview <div>). If height of elements reaches e.g. 300px, I need to trigger some action.

Firefox and Chrome are doing this well. IE Edge seems to add an additional line height per element. I figured out that this is because of <br /> tags at the end of each element. Seems they are handled as an additional line of text in Edge.

Comparing the boxes height in photoshop, I can see, that Firefox and Chrome are right. Edge counts much more height in total, than is visible.

I'm not able to manipulate the variable text inside my preview <div>. Does anyone have an idea, how to fix it using jquery or javascript?

My html:

<div class="preview">
  <span>Lorem ipsum, <br/></span>
  <span><br/></span>
  <span>Lorem ipsum doilor sit amet <br/></span>
</div>

<input type="text" id="t" value="0">

My jQuery:

var ct = 0;
$('.preview').children().each(function() {
    ct = ct+$(this).outerHeight(true);     // 'true' for including margins
});
$('#t').val(ct+"px - total height");

Please have a look on my fiddle in Chrome/firefox and compare to IE Edge

https://jsfiddle.net/e3adkvmq/3/

Original Q&A

There are 1 best solutions below

**Deepak-MSFT** · Answer 1 · 2020-08-17T06:31:30.090000

I can see that you are having an issue with the MS Edge legacy browser.

I make a test with your sample code and I can produce the issue on my end. I try to find the solution to this issue but there is no solution available for this issue.

As a workaround, you can try to add white-space: pre; to the .preview CSS class and remove the br tags from the HTML code. It will not give you the exact same value as other browsers but it can help to minimize the difference.

Modified code:

<!doctype html>
<html>
<head>
<style>
.preview { line-height: 14px; font-size: 12px; border: 1px solid #c00;white-space: pre; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var ct = 0;
$('.preview').children().each(function() {
    console.log(ct);
    console.log($(this).outerHeight(true));
    ct = ct+$(this).outerHeight(true);
});

$('#t').val(ct+"px - total height");
});
</script>
</head>
<body>
<h4>Counting up height of Elements inside red bordered div</h4>

<div class="preview">
  <span class="intro-breaker">Lorem ipsum,</span>
  <span class="intro-breaker"></span>
  <span class="intro-breaker">Lorem ipsum doilor sit amet</span>
  <span class="intro-breaker">Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt.</span>
  <span class="intro-breaker"></span>
  <span class="intro-breaker">Lorem ipsum doilor sit amet</span>
</div>

<input type="text" id="t" value="0">
</body>
</html>

Output in the MS Edge legacy browser:

You can try to press the ALT + J key in the MS Edge legacy browser and try to provide the feedback about this issue to Microsoft.

As other community members had already informed you, you can suggest your customers upgrade to the new MS Edge chromium-browser to avoid this issue.

Problems in getting elements outerHeight in IE Edge using jQuery

There are 1 best solutions below

Related Questions in HTML

Related Questions in JQUERY

Related Questions in MICROSOFT-EDGE

Related Questions in OUTERHEIGHT

Trending Questions

Popular # Hahtags

Popular Questions