div height is zero inside $(document).ready()

Question

As per my knowledge if we write code JQuery code inside $(document).ready() then the code will be executed after the DOM has fully rendered.

I'm trying to calculate the div height inside $(document).ready() but its returning zero height. But when I run the same code in browser's console it returns the correct height.

The content is loading via Angularjs.

JQuery:

$(document).ready(function (){
 // hide view more button if user bio content is less than 200 words
    var userBioLength = $('.userBioText > p').html().split(" ").length;
       if( userBioLength<=200){
       $('.userBioOverly').addClass("hide")
       $('.viewMore').addClass("hide")


    var textHeight = $(".userBioText").height();
    console.log(textHeight);  // return 0
    $('.userBioWrapper').css({height:textHeight + 10+'px'});
}

HTML:

 <div class="userBioWrapper">
       <div class="userBioText">
            <p>
               {{userInfo.bio}} 
               Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Id fugiat praesentium molestias aliquam quam cupiditate officiis eligendi dolor repellendus, recusandae voluptatem. Iste aliquam itaque rem tempore officia perspiciatis natus molestiae.
              </p>
       </div>
      <div class="userBioOverly"></div>
 </div>

I'm curious why this behavior is different. I'm I doing something wrong?

If you're loading content via angularjs why not use it for its hide/show abilities too? (e.g: `ng-show`) — MadaManu, Jan 08 '20 at 05:48
if I'll use ng-show then either the content will be visible or not. But in this case I want to modify the height of the Div. — spratap124, Jan 08 '20 at 05:59
I would then use a class defining the new height of the div and apply that class in angularjs based on a comparison of the text length — MadaManu, Jan 08 '20 at 06:02
I did the same by using the height: unset in the class. but unset is not supported in IE. So only wanted to try this approach. — spratap124, Jan 08 '20 at 07:23

bresleveloper · Answer 1 · 2020-01-08T06:34:25.933

No.

Not fully rendered, but the event ready of the document, that means he downloaded everything from the server, and that includes the raw html.

Angular js actually starts after the jquery ready finishes...

If you want something to be done after ng is done you need to put a timeout in your controllers or directives, and usually, unless there is an ng-for, it will work even with 0 ms waiting

EDIT: more solutions here (better than my own..)

score 0 · Answer 2 · answered Jan 08 '20 at 07:28

It worked for me by setting the Div height using css class. In css class I'm setting the height:auto;.

css:

.unsetHeight { 
    height: auto;
 }

Jquery:

 var userBioLength = $('.userBioText > p').html().split(" ").length;
    if( userBioLength<=200){
        $('.userBioOverly').addClass("hide")
        $('.viewMore').addClass("hide")

        $('.userBioWrapper').addClass("unsetHeight");
 }

div height is zero inside $(document).ready()

2 Answers2