CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
willdanceforfun
willdanceforfun

Reputation: 11240

Height: auto calculating incorrectly if element is hidden when dom loads, then shown later

I have an svg with css width: 100%, and height: 100%. The wrap element takes up the full width of the screen. The height is auto. The wrap div is what defines the dimensions of the svg.

E.g.

<div id="svg-wrap" style="width: 100%; height: auto;">
    <svg style="width: 100%; height: 100%;"></svg>
</div>

If I load the page with these elements hidden (display: none), it appears to mess with the calculating of the height when the elements are shown after the dom is ready. For example, the dimensions of the svg will end up being something extremely out of proportion like 1024px wide x 25px high, instead of say 500px high.

I'm assuming if objects are hidden, it cannot calculate what the width of an object is, and it kills auto heights. What am I missing? Or what is the workaround for this?

Upvotes: 0

Views: 165

Answers (1)

Amin Jafari
Amin Jafari

Reputation: 7207

instead of display:none; use visibility:hidden; and you're good to go!

display:none; literally hides the object from the code, while visibility:hidden; just hides the object from the user's view.

Upvotes: 2

Related Questions