asked on

jQuery: Having difficulty setting a child <div>'s height to match it's parent <td>

Please look at http://jsfiddle.net/wg9j4n1f/6/.

My code simply uses jQuery to "seek out" all <td> tags with a rowspan because they all have a child <div>. My goal is to set the <div> tag's height to match it's parent <td>'s height. For some reason, my code isn't working.

Can someone please help? Thanks.

P.S. Although I posted the code in jsfiddle, the problem doesn't show there. I am attaching a snapshot of my results.

chaau

This is because the div increase pushes the cell increase. If you add a new line in the log:

        console.log("<td> NEW height=" + $(this).css("height"));

Open in new window

You'll get:

"<td> height=108px" 
"<div> height=90px" 
"<div> NEW height=108px" 
"<td> NEW height=120px"

Open in new window

The workaround here is to subtract 12px from the <td> height when assigning the NEW height of the div. The 12px most likely came from the div padding (2 x 5px) and the border (2 x 1px), like this:

$(function() {
    $("td[rowspan]").each(function() {
        // Grab the height of <td>s with a rowspan attribute
        var tdHeight = $(this).css("height");
        var h = (parseInt(tdHeight, 10) - 12) + "px"
        console.log("<td> height=" + tdHeight);
        // Grab this <td>'s child <div> and display its height
        var div = $(this).find("div");
        console.log("<div> height=" + div.css("height"));
        // Set this child <div>'s height to match it's parent <td>
        div.css("height", h);
        console.log("<div> NEW height=" + div.css("height"));
        console.log("<td> NEW height=" + $(this).css("height"));
    });
});

Open in new window

If you do not like hardcoding you can retrieve the value 12 from the css

elepil

ASKER

chaau, thanks for responding.

I looked at your jsfiddle link, they <div>s are not correct. Look at the 1:00pm-2:00pm, the 2:00pm-3:00pm, 3:30pm-4:30pm <div>s, they're not expanding the full height.

I see what you're pointing out to me how the <td> is expanding in height after the <div>'s height is increased. Do you know what's causing that?

ASKER CERTIFIED SOLUTION

chaau

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

elepil

ASKER

I was using IE. This is how it looks:

elepil

ASKER

But can you explain to me where that extra 12px is coming from?? I have no margins in my .ac class, so I'm not sure I understand where those extra pixels are coming from. I do have padding, but that's inside the <div>, not outside. You did pinpoint the cause of the problem though, and I thank you for that. I think I should attack this at the root, and that means finding out where that extra 12px is coming from and eliminating it.

chaau

Have a read here:

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

So, your padding and border increase the div by exactly 12px.

Please read the article to the very bottom:
Browsers Compatibility Issue

Internet Explorer 8 and earlier versions, include padding and border in the width property.

To fix this problem, add a <!DOCTYPE html> to the HTML page.

elepil

ASKER

My document does have the correct DOCTYPE tag as you showed. I've also already read the quote you posted, but I'm not sure that's it though. I modified my .ac class to look like this:

.ac {
    display: block;
    /* border: 1px solid #CCC; */
    /*border-radius: 10px;*/
    /*padding: 5px;*/
    width: 250px;
    min-height: 90px;
    height: 100%;
    /*box-shadow: inset 0px 0px 10px -2px blue;*/
    background-color: lightgreen;
}

Open in new window

There's no more border, no more padding, no margins, no box-shadow, and it still looks like this:

chaau

What about your <td> elements?

chaau

Also, please note that sometimes Ctrl-F5 instead of F5 does a magic

elepil

ASKER

chaau, I somehow got it to work perfectly with Firefox, Chrome, and Opera. IE is the only problem. I am closing this post because the problem description for IE will be different. So thanks for your help on this. If you want to take another shot at IE, the link of the new post is at https://www.experts-exchange.com/questions/28691481/jQuery-Having-difficulty-setting-a-child-div-'s-height-to-match-it's-parent-td-for-Microsoft-Internet-Explorer-ONLY.html.

Thanks again for your help.

jQuery: Having difficulty setting a child &lt;div&gt;'s height to match it's parent &lt;td&gt;

jQuery: Having difficulty setting a child <div>'s height to match it's parent <td>