CODEWITHSUNDEEP
javascripthtmlcss
Rohan Prabhu
Rohan Prabhu

Reputation: 7302

Resize div element to original, 'required' size

I have a div with some content in it:

<div style="overflow: hidden">
    <table>
        ....
    </table>
</div>

There are multiple instances of this <div> all across the page and the size varies from around 250px to 400px. Since a lot of them are to be stacked, I want them looking uniform and not take a lot of space. So, I resized all of them to have only 200px in height. However, each one of them has an expand button, which is supposed to bring out the entire <div>. However, the problem I am facing is that I don't know what to resize it to when the expand button is clicked. I tried 100%, but it expands it to 100% of the screen size. How can I expand it to expand only to the required size i.e. a size that wraps all the content in it and nothing more?

If the solution requires some javascript computation of the size, it is OK.

Upvotes: 0

Views: 63

Answers (3)

Rohan Prabhu
Rohan Prabhu

Reputation: 7302

Ok, finally figured this one out.. this is what works for me:

$(selector).css("height", "inherit");

Upvotes: 0

harshal
harshal

Reputation: 592

You mean to say you want to re-size the div to size just enough show the contents and you need to figure the size on run time based on the contents. You would have seen that if you don't mention the size, by default the browser renders the what you exactly want.

this is what you have to use... document.getElementById('id?').removeAttribute('attribute?')

setting as null or "" means you are providing invalid value

Upvotes: 1

Stephen Thomas
Stephen Thomas

Reputation: 14053

Just remove the height completely. The <div> will then expand to contain the inner content.

Upvotes: 1

Related Questions