jQuery + CSS. How do I compute height and width of innerHTML?

Question

I have a typical parent-child div hierarchy for a Web project using jQuery. The child css has not height, this allows it to expand and contract based on the height of the innerHTML. I am programmatically stuffing HTML markup into the innerHTML property of the child.

I want to set the height of the parent to match the height of the child after the child has it's markup. How do I do this? I tried:

    childDiv.innerHTML = content;
    childDivObject = $(childDiv);

     parentDivObject = $(parentDiv);
     parentDivObject.css({
        "height" : childDivObject.height() + "px"
    });

But this did not work. What am I missing?

UPDATE 0

More context. This code is for a popup that appears/disappears with a user tap. Here is the css. There is just not a lot going on here:

// parent
.parent {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    display: none;
}

// child
.child {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 25px;
}

Could the fact that the parent has display:none be part of the problem? I am using the jQuery show()/hide() methods if that is relevant.

You should check height of the child on every HTML Markup is inserted into the child and then add the height to the parent parentDiv.height(childDiv.height()); — Bojan Petkovski
– Bojan Petkovski, Commented Sep 26, 2014 at 11:42
since you're using jquery, have you tried childDiv.html(content) ? the parent will expand with the child after html insertion without problems — CME64
– CME64, Commented Sep 26, 2014 at 11:42
Are you inserting the content in the child div upon clicking to show the parent? — Bojan Petkovski
– Bojan Petkovski, Commented Sep 26, 2014 at 12:06
jQuery is not the issue here. The issue is: why is my div reporting a height of 0 after innerHTML has be stuffed with markup and it renders properly. — dugla
– dugla, Commented Sep 26, 2014 at 12:10
The problem is with 2 elements positioned absolute. So the child element takes no space in the parent element — Bojan Petkovski
– Bojan Petkovski, Commented Sep 26, 2014 at 12:32

David Jones · Accepted Answer · 2014-09-26 11:33:49Z

0

Change this:

"height" : childDivObject.height() + "px"

to this:

"height" : childDiv.height() + "px"

Looks like you are trying to get the height of the content rather than the div itself.

answered Sep 26, 2014 at 11:33

David Jones

4,3157 gold badges31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dugla Over a year ago

David, childDiv is the DOM element and childDivObject is just the jQuery-ified flavor of the same thing so I can use jQuery methods. When I call childDivObject.height() after setting innerHTML I am getting a height of 0. Even though the div is rendering properly. Does not setting innerHTML trigger the setting of height/width of the element? I don't get it.

David Jones Over a year ago

Can this not just be solved by not applying any height to the parent? Perhaps a jsfiddle would help us understand the issue

dugla · Accepted Answer · 2014-09-26 12:32:15Z

0

Got it. Because jQuery toggles the css display property to hide/show the popup.

The answer is to do this:

    parentDivObject.css({
        "left": left + "px",
        "top" : top  + "px"
    }).show();

    parentDivObject.css({
        "height": childDivObject.height() + "px"
    });

I set the height after the jQuery show() method which toggles display and then height becomes valid. It's not pretty, but it works. Cheers.

answered Sep 26, 2014 at 12:32

dugla

12.9k26 gold badges95 silver badges140 bronze badges

2 Comments

George Katsanos Over a year ago

ye, you didn't solve the main cause of your problem, you just found a way around it.. that's some ugly-ass code :/

dugla Over a year ago

George, actually I think it is a bug that it is not possible to set height/width/whatever on an element if display is none. I see nothing wrong with my approach given the hair ball that is web tools.

Community · Accepted Answer · 2017-05-23 11:57:41Z

0

Normally you would use a callback, but html() doesn't have one, but there's something else, called promise.

jquery html() callback function http://digitizor.com/2013/08/03/jquery-html-callback-function-using-promise/

   $('#divId').html(someText).promise().done(function(){
        //your callback logic / code here
    });

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Sep 26, 2014 at 11:52

George Katsanos

14.3k18 gold badges71 silver badges114 bronze badges

4 Comments

dugla Over a year ago

George, .html(content, function(){ // do stuff }) does not fire. .html(content).innerHeight() reports 0 height. Yet the content renders properly. None of this makes any sense.

George Katsanos Over a year ago

Changed my answer. Callback doesn't work on html(), you need a promise.

dugla Over a year ago

promise()? You're joking right? I mean is that an actually method?

dugla Over a year ago

George, the root issues is that height cannot be set on an element with display:none. Oddly, and completely inconsistenly I can set top/left. It's like it is all designed to be a time sucking experience doing web development. Sigh.

Collectives™ on Stack Overflow

jQuery + CSS. How do I compute height and width of innerHTML?

UPDATE 0

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE 0

3 Answers 3

2 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related