CODEWITHSUNDEEP
javascripthtmlstylesheet
Mike D
Mike D

Reputation: 2841

Hidden HTML elements take space

I'd like to make some empty hidden elements (iframes would be nice, paragraphs would do) that Javascript would later fill and modify. I have not been able to figure out how to keep these elements from taking up space. I've turned off margins and padding and set height to zero but still end up with blank space.

I'd like to see an example of an hidden element that takes no space on the page. Actually, I'd like to see the HTML, CSS, and Javascript. :-).

Upvotes: 25

Views: 29909

Answers (8)

Reddappa Naidu
Reddappa Naidu

Reputation: 13

To hide the element, use :

document.getElementById(Id).style.display = "none";

To show the element, use :

document.getElementById(Id).style.display = "inline-block";

Upvotes: 0

awol
awol

Reputation: 66

I have found that if i use visibility: none then I lose the targets embedded in those objects. As a result I set the font-size: 0pt which seems to work well for me.

I use this to hide the default names that ReSTructured text puts in for inline internal targets; span.target { font-size: 0pt };

Upvotes: 1

thedanielhanke
thedanielhanke

Reputation: 738

#myelement { display:none; } should already do it via CSS, using <div id="myelement"></div>

Upvotes: 1

mystifeid
mystifeid

Reputation: 276

style="visibility:hidden;line-height:0;"

Setting the height to less than the line-height is generally a waste of time.

Upvotes: 0

James Hull
James Hull

Reputation: 3689

I assume you are using visibility: hidden? As you have seen, this will hide it, but will still take up space.

However, using display: none will hide it and remove it from the page layout.

Upvotes: 5

Palantir
Palantir

Reputation: 24182

Why can't you just set style="display:none" or style="visibility:hidden", and then set it to visible after you have comleted the missing content?

Upvotes: 0

Jess
Jess

Reputation: 42928

If you're using visibility: hidden; you should be using display: none; instead.

Upvotes: 51

Tim
Tim

Reputation: 9489

The most common solution is an input with type hidden.

<input type="hidden" value="yourvalue" id="yourid" />

No styling required.

You can set the value of this input with somthing like

document.getElementById('yourid').value="The Value Here";

Upvotes: 0

Related Questions