RequiredFieldValidator places display:inline on the text

Viewed 29149

I have a RequiredFieldValidator with Display="Dynamic" on my ASP.NET WebForm. I have assigned it a class using the CssClass property. I want the error message to be displayed using display: block, so I have placed this on the css class in my style sheet.

Unfortunately, the validator places a display: inline on the element on the web page, effectivaly overriding my style sheet value.

Can I get rid of that?

Edit:

I just realised why this doesn't work. When setting Display="Dynamic" on a validator, it has the effect that it sets style="display: none" on the span tag when rendering. The .net javascript library then switches the inline style of the element between none and inline. That is simply how the dynamic validator works. So for this to display as a block element, I will need to modify how the client side event validation works. Is it possible to do that?

8 Answers

I was about to try a css solution, but after reading what you posted (updated), I think I may stick with mine. I already had to configure my validator on the server for other reasons, so I just check the control type of the "controlToValidate", then for textbox type controls, I add a <br /> tag to the front of the message.

e.g.
// Inline (if configured)
myvalidator.Text = "<br />My message";

// Normal message and validation summary (if configured)
myvalidator.ErrorMessage = "My Message";

This keeps the line break from rendering in the validation summary, while still looking right for my inline messages.

I think Blackomen's approach is also good, but it needs to be selectively applied as well.

Just set float:left to your css

By using above solution if your required field display before your control then simply add new line tag <br/> between your control and required field validator

Related