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

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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';

Answer 4

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.