CODEWITHSUNDEEP
htmlcss
Aaron Fi
Aaron Fi

Reputation: 10396

pesky HTML layout: how do I hide an element while preserving the layout?

I want to hide a form input field. But calling setVisible('inputID', false) causes my liquid layout to collapse. I don't want that.

Is there some easy workaround here? I thought about trying to render the input field's foreground color, background color, and border color to be all white. But that's getting unnecessarily complicated.

Upvotes: 3

Views: 4459

Answers (4)

Assaf Lavie
Assaf Lavie

Reputation: 75973

That's the definition of an element with relative positioning.

Just give it relative positioning and coordinates far off the screen.

e.g.

position:relative
left:-2000px

It should put the element out of the screen, but leave a "hole" where it would have been.

Upvotes: -1

Guffa
Guffa

Reputation: 700322

There are two ways of hiding elements using css:

  • Settings the display attribute to none

  • Setting the visibility attribute to hidden

The first option removes the element from the flow, while the second option hides the element but still lets it take up space in the flow.

You are using the first option and you want to use the second option instead.

Example:

document.getElementById('inputID').style.visiblity = 'hidden';

Upvotes: 8

David
David

Reputation: 34563

If you set an element's "visibility" style to "hidden" it will hide the element from view but it will not affect the layout of other elements.

Upvotes: 3

Tyson
Tyson

Reputation: 6244

It's hard to give better advice without seeing your code, but there's a few things you can do:

  1. Given that you're using JavaScript, you could get the width and height of the form input you're removing, create a new div with those dimensions, inject it after the form element, then hide the form element. A bit of a hack, but it works.

  2. Surround your input with a div in your HTML and give it an explicit width and/or height in your CSS. Then remove the input with JavaScript as you're doing already.

Upvotes: 0

Related Questions