ASP .net MVC5 - CSS styling issue- "@Html.ValidationMessageFor"

Question

My problem is styling a server generated validation message, the padding displays the background color before the message is generated, when the padding is removed, the background-color is no longer visible.

I want to have the padding in the code for styling purposes, but without showing any content or background color as this is a validation message, here is the code as follows:

<div class="validate">@Html.ValidationMessageFor(m => m.Email)</div>

css:

.validate {color:#ecf0f1;font-size:.9em;background-color:#e74c3c;padding:10px;}

Before validation:

before

What occurs after the validation shows up:

after

What I want before validation:

what i want

In site.css change the .field-validation-error to your required style. You do not need to create a new class. Doing so you won't need to worry about your problem — Bhavik
– Bhavik, Commented Apr 2, 2014 at 5:01
ok thank you for that, I did this but now the background color does not span the whole div, as seen in the screenshot. — AntonB
– AntonB, Commented Apr 2, 2014 at 5:07
added a demo fiddle for your reference. Please share the rendered HTML of your code if still not works! — Sunny Sharma
– Sunny Sharma, Commented Apr 2, 2014 at 5:41

Sunny Sharma · Accepted Answer · 2014-04-02 05:39:09Z

1

that's because of the Div that you've ValidationMessage inside and CSS applied on that div.

try this CSS:

.validate:not(:empty)
 {
   color:#ecf0f1;
   font-size:.9em;
   background-color:#e74c3c;
   padding:10px;
 }

DEMO FIDDLE

edited Apr 2, 2014 at 5:39

answered Apr 2, 2014 at 4:59

Sunny Sharma

5,0045 gold badges41 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AntonB Over a year ago

:not :empty, did not do anything visually, is there something missing?

Sunny Sharma Over a year ago

oops... please note: it's :not(:empty) and not :not :empty

AntonB · Accepted Answer · 2014-04-02 05:28:23Z

0

Solved with modifying the class:

.field-validation-error

By adding:

{display: inline-block;  width:100%;
color:#ecf0f1;
font-size:.9em;
background-color:#e74c3c;
padding:10px;}

answered Apr 2, 2014 at 5:28

AntonB

2,8632 gold badges35 silver badges40 bronze badges

Collectives™ on Stack Overflow

ASP .net MVC5 - CSS styling issue- "@Html.ValidationMessageFor"

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related