CODEWITHSUNDEEP
cssasp.net
Massey
Massey

Reputation: 1125

Even when the span element has visibility:hidden, it occupies space in FireFox

I am working on asp.net webforms. I am displaying a asp:RegularExpressionValidator in a <td> element which validates entry in a textbox. When the page loads, it is displayed as a <span> element with visibility:hidden. The problem is that in Firefox, it still occupies space, which doesn't happen in IE and Chrome. Because of this the html is not displayed properly in Firefox. Is there any solution for this?

Upvotes: 0

Views: 1715

Answers (3)

Jesus Lugo
Jesus Lugo

Reputation: 796

I'd recommend a different approach... I know that code depends on asp.net... I presume the thing you don't want is to have a bigger spacing because of those validators, or you don't want the layout to be expanding on error highlight, considering that, I'd suggest:

  • Make all validator messages having position absolute (I hope you have a container for each field, that one needs to have position: relative)

  • As each validator have absolute position, won't take more vertical space (it's better to add the code via a css class, which should have something like:

    .validatorMessage { position: absolute; left:0; top: 2rem /* should be the height of the field */ }

The only issue is, when those messages fires up, will shorten the available space, but I think is a reasonable tradeoff.

Hope this can help

Upvotes: 0

Neeraj
Neeraj

Reputation: 4489

You should try display:none instead of visibility:hidden.

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

Upvotes: 1

onepoordeveloper
onepoordeveloper

Reputation: 309

"Visibility: hidden;" renders the element but keeps it invisible. If you intend not to load the element, you should use

.someElement { display: none; }

This would not even reserve the space for the specified element.

Hope this helps..

Upvotes: 1

Related Questions