asp.net mvc view css not showing as expected


Tags: css,asp.net,asp.net-mvc,asp.net-mvc-4

Problem :

I am new to ASP.Net MVC and was wondering why and how I can resolve an issue with a text box not taking the CSS as I had expected.

My CSS is

.newsLetter {
border-radius:4px; 
background-color:#393939; 
width:100%; 
border: 1px solid #393939;

}

The pre MVC \ View HTML is

<h2>NEWSLETTER</h2>
  <p style="color:#b5b5b5; float:left;">Sign up to our News Lettter</p>
  <p><input type="text" name="" value="Your Name" class="newsLetter mainText" /></p>
  <p><input type="text" name="" value="Your Email Address"class="newsLetter mainText" /></p>
  <p><input type="submit" name="" value="Subscribe" class="smallBlueButton" />

The View I am using to render this

<div class="col-md-10">
            @Html.EditorFor(model => model.Name, new {htmlAttributes = new {@class = "newsletter mainText"}})
            @Html.ValidationMessageFor(model => model.Name, "", new {@class = "text-danger"})
        </div>

This is the actual result in the HTML

<div class="col-md-10">
            <input class="newsletter mainText text-box single-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
            <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>

What I would like help with is how do I get it to drop the text-box single-line CSS.

Any and all help very much appreciated.

Thanks



Solution :

Your CSS uses a class of .newsLetter (upper case L) but the class you're rendering in your HTML is 'newsletter' (lower case L). They need to match.


    CSS Howto..

    How to add an attribute other than style attributes to css?

    Can't figure out how to make a box with multiple images with CSS/HTML

    How to align text vertical CSS

    How to debug CSS bundled by Webpack?

    Show a sharing icon on hover on image

    Show missing CSS in Google Chrome

    How to: mob-responsive menu that will always have a height:100% and show all
  • s although the body gets position:fixed when the list is displayed
  • How do I switch external CSS files?

    How to emulate table cells with CSS (without float)?

    How to Convert this Inline CSS to External CSS using just a single class?

    how to make a span hold its position from an encroaching div

    How to rearrange several divs on window resize - jQuery or CSS

    How to add element to existing css class [closed]

    How to remove style type css wordpress from header?

    css, how to stop an element being squashed by container

    how to add dots (…) with the same width?

    I need a max-margin CSS property, but it doesn't exist. How could I fake it?

    How to horizontally center align a span inside a div

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    How to center verticaly n inline containers with different font-size?

    how to change an existing website to bootstrap [closed]

    How to auto adjust (stretch) div height and width using jQuery or CSS

    How to stack smaller text in CSS?

    How to get Susy going with a CSS only toggle navigation

    Font-family not showing correctly on my website

    How to set border between two products in css?

    How to make div stay visible when hovering on it

    How to reference a Div after each h3

    How to make a website run faster?

    How to Troubleshoot CSS?