16

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

Boris Callens
  • 90,659
  • 85
  • 207
  • 305
  • 1
    Are you using server-side code at all? If so, you can conditionally render one or the other field rather than doing it with styles or script. – Joe Chung Jul 03 '09 at 09:05
  • yes, that's what I'm doing now. But as I mentioned, I would like to keep the branding in the css only. Now I have to maintain branding in both the views as the stylesheets. – Boris Callens Jul 03 '09 at 09:21
  • Why do you you want to keep the branding changes only in the CSS? CSS is used for styling only - if your branding involves changing the structure of the HTML the appropriate place to handle this is in the HTML. – edeverett Jul 03 '09 at 09:25
  • Because the core functionality is basically the same. The only difference is the priority in search factors. As my partial first shows only a few fields (the most important ones) it would be nice to just hide the others. – Boris Callens Jul 03 '09 at 14:01

7 Answers7

18

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

Paul Redmond
  • 3,276
  • 4
  • 32
  • 52
bdo334
  • 380
  • 2
  • 9
  • 20
  • 3
    This would be good. Ideally the HTML presented to the user should make sense without the need for CSS. – edeverett Jul 03 '09 at 09:15
  • This would spread my branding logic over the stylesheet and the views. Now I need to maintain branding logic at two places instead of one. – Boris Callens Jul 03 '09 at 09:22
  • Muddling the separation of concerns in the technologies you are using for quick gains is rarely the path to easily maintainable code. – edeverett Jul 03 '09 at 09:32
  • And how do you see your sentence connected to my case? Stylesheets are for GUI definition. The branding is pure GUI. The functionality is exactly the same. There is no quick gain involved. The quick gain is having conditional rendering. Now whenever a brand is added I have to make sure my conditional rendering takes the new brand into account as well. – Boris Callens Jul 03 '09 at 14:04
  • This will not work if you are implementing clipboard.js so the other answer would be more appropriate in this scenario. – Felipe Alarcon Oct 29 '16 at 10:01
13

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

peirix
  • 36,512
  • 23
  • 96
  • 126
  • Display:none didn't do the trick. In combination with position:absolute it did though. You think you can provide me with an explanation as of why? – Boris Callens Jul 03 '09 at 09:30
  • position: absolute will take any element out of the render flow, making it have no impact on any other element around it. It's a very common method for overlays and modals. – peirix Jul 03 '09 at 10:02
  • Maybe it's too old, it doesn't work anymore (unfortunately T.T) – Nguyen Tan Dat Jan 22 '18 at 16:40
10
<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.

Bhaskar
  • 10,537
  • 6
  • 53
  • 64
3

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

Rahul
  • 12,181
  • 5
  • 43
  • 64
0

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?

rahul
  • 184,426
  • 49
  • 232
  • 263
0

You can do this if you want to isolate the css code from other input:

input[type="checkbox"] {
    display: none;
}

You can also further isolate it from the same type by indicating another class.

Karlo J.
  • 1
-1

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.

Maxim Zaslavsky
  • 17,787
  • 30
  • 107
  • 173