CODEWITHSUNDEEP
javascriptjqueryhtmlcss
lulliezy
lulliezy

Reputation: 2043

JQuery height does not return exact height

I have a problem I don't understand and googling hasn't been of much help either, I want to get height of a div with a p tag in multiple lines as of the image div image

The height returned is as if the p tag is in only one line but after it has already rendered and spans over the multiple lines, when you call the function height it displays the actual results, how do I actually get it to display the actual height from my javascript code? What I have so far is

console.log($('div.content-wrapper').height(), $('div.content-wrapper').outerHeight())

which both display same thing.

Height displayed: 42
Actual height: 86

P.S. I am creating the element from JS

$('div.container').append(' \
  <div class="content-wrapper"> \
    <p class="text"></p> \
    <div class="button"> \
      <span class="button-text"></span> \
    </div> \
  </div> \
');

Upvotes: 0

Views: 278

Answers (1)

JoshulSharma
JoshulSharma

Reputation: 173

$(element).outerHeight()

will return height including height with borders and paddings

use,

$(element).outerHeight(true)

to include margins as well.

Also, if you have many other elements in your wrapper DIV tag than you can use below code.

$(window).load(function(){  
   $("wrapper-element").children().each(function(){
     totalHeight = totalHeight + $(this).outerHeight(true);
   });
});

Upvotes: 1

Related Questions