CODEWITHSUNDEEP
asp.netwebforms
Pete
Pete

Reputation: 12573

RequiredFieldValidator places display:inline on the text

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?

Upvotes: 25

Views: 30398

Answers (8)

Yogesh
Yogesh

Reputation: 180

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

Upvotes: 0

David
David

Reputation: 735

Using CSS attribute selector and !important I did it. I had to use the "contains" selector to get it working in FF, but now I have tested it in IE10, FF and Chrome and so far it is working. It is really simple. Here is a sample validator in my aspx page:

<asp:RequiredFieldValidator runat="server" ID="rfvRequired" ErrorMessage="This is required.<br/>This is line 2" ControlToValidate="tbRequired" ValidationGroup="CommonAttributesValidationGroup" SetFocusOnError="True" CssClass="valerror" Display="Dynamic"></asp:RequiredFieldValidator>

Next I have a style for valerror.

span.valerror[style*="inline"]
{
    display:block !important;
    background-color: Yellow;
    border: 1px solid #cccccc;
    font-size:.9em;
}

That is it. How it works: when the span changes the style from "display:none" to "display:inline" the attribute selector on the span kicks in and forces it to be a block. You just need to make ONE CSS entry like the one above and make sure you make each validator that class.

Upvotes: 35

Khan
Khan

Reputation: 2982

One option is to float the element to make the element act "more like a block".

HTML

<div class="form-group clearfix">
  <asp:CustomValidator runat="server" Display="Dynamic" CssClass="help-block" />
</div>

CSS

span.help-block {
  float: left;
  width: 100%;
}

Upvotes: 1

Paul Shoesmith
Paul Shoesmith

Reputation: 21

I have found a solution that works by overriding the .net ValidatorUpdateDisplay() method in JavaScript, and needs to be put before the close body tag.

<script type="text/javascript">
    function ValidatorUpdateDisplay(val)
    {
        if (typeof (val.display) == "string")
        {
            if (val.display == "None")
            {
                return;
            }
            if (val.display == "Dynamic")
            {
                val.style.display = val.isvalid ? "none" : "block";
                return;
            }
        }
        if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1))
        {
            val.style.display = "inline";
        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
    } 
</script>

Upvotes: 2

dotnetnoob
dotnetnoob

Reputation: 11350

There is a simple solution which will work now and in the future.

1) Add a class to the validator
2) Use jquery to add an inner element to the validator span or use javascript

function wrapValidators() {

    $('.input-error').wrapInner('<span class="block" />');
}

3) add css to 'block' class "display:block"

Upvotes: 0

Zambodi
Zambodi

Reputation: 11

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.

Upvotes: 1

Henry C
Henry C

Reputation: 4801

An extremely hacky solution I once used (which I'm not proud of, but it worked) was to wrap the RequiredFieldValidator in a <div>, which is a block element; therefore even though your RequiredFieldValidator is inline, it's inside a block div so it'll effectively appear as display:block in most cases.

Told you it was hacky!

Upvotes: 29

Pieter Nijs
Pieter Nijs

Reputation: 445

Maybe this can help you:
http://caliberwebgroup.blogspot.com/2009/02/overriding-javascript-in-webresourceaxd.html

Upvotes: 4

Related Questions