Make input invisible through css?

StackOverflow https://stackoverflow.com/questions/1078451

  •  21-08-2019
  •  | 
  •  

Question

I have a form where depending on the website's brand one of two input fields should be visible at one given spot.

I figured I just put both input fields in the same container and then through my stylesheet set one of them to display:none; This does hide the field, but it still makes it take up space. I also tried setting the height and width to 0 or setting visibility to hidden or collapse but none of those worked.

Untill now all the branding things could be done with css style sheets so I would like to keep it that way. The solution should at least be supported in IE6 & up, Firefox 2 & up and Chrome (latest).

Was it helpful?

Solution

What about setting the invisible input field to position: absolute; which should take it out of the rendering flow.

However, setting it to display: none should in theory do the same...

OTHER TIPS

why don't you use input type="hidden" ? 

<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


<input type="text" name="mytext" class="hideme">

You can either set class="hideme" to hide your control or class="showme" to show your control. You can set this toggeling using JavaScript or server side coding.

This does hide the field, but it still makes it take up space.

This shouldn't happen; display: none should cause the element to not be included in the flow. Check the rest of your CSS (try using Firebug to figure out where the extra "space", which is probably just padding or margin of some surrounding element, is coming from).

I'm not too familiar with CSS, but you can try implementing JQuery which combines Javascript and CSS to let you do stuff like that with relative ease.

Using the visibility property takes up rendering space even if the element is not visible. Instead of using visivility you have to use display property.

You can set the display to none if you want to hide the element and display to block or inline if you want to show them.

To have a look on display check this

If setting your display property doesn't solve your problem, then I think the textboxes might be absolutely positioned. It might be the reason for the layout not to be changed.

Can you please post the complete code?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top