0

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?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Massey
  • 1,099
  • 3
  • 24
  • 50
  • 2
    use display:none instead of visiblity:hidden – Sherin Mathew Jan 07 '16 at 05:19
  • http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Sherin Mathew Jan 07 '16 at 05:19
  • In my case, it is set by the asp.net control from the code behind! – Massey Jan 07 '16 at 05:38
  • Use the approach mentioned here - http://stackoverflow.com/questions/3931573/regular-expression-validator-display-block-rather-than-inline-when-dynamic – Sherin Mathew Jan 07 '16 at 05:42
  • Visibility:hidden, does just that Hides the Visibility of the entity. Think of Harry potter Invisibility cloak, harry was still there just invisible, He was still taking up SPACE. Display:None removes the element from the Page. RIP Severus. – KING Jan 14 '16 at 19:27

3 Answers3

1

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

onepoordeveloper
  • 199
  • 1
  • 5
  • 15
1

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.

Neeraj Dubey
  • 4,401
  • 8
  • 30
  • 49
0

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

Jesus Lugo
  • 787
  • 6
  • 15