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

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 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.