CODEWITHSUNDEEP
c#htmlasp.netcssasp.net-mvc-5
AntonB
AntonB

Reputation: 2853

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

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

Upvotes: 2

Views: 4930

Answers (2)

Sunny Sharma
Sunny Sharma

Reputation: 4934

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

Upvotes: 1

AntonB
AntonB

Reputation: 2853

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;}

Upvotes: 0

Related Questions