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..

    JS/JQuery: How to switch class several times in a loop way?

    HTML/CSS: How to make web page stay put when resizing browser window?

    How do I execute a javascript after Ajax load?

    How can I add a css element change to an onlick event in this jquery lib?

    How do I adjust the spacing around the sides of list items in jquery mobile

    How to put container div under menu using CSS

    how to make dropdown menu using html & css

    How to make Block Container with Inline-Block Child in CSS

    How to make header/body/footer 'popup' div with variable height body?

    How to keep width of the main container to maximum width in a 3 column fluid layout?

    How to write regex to extract specific key format and value from CSS file?

    How to make a responsive div stick to page edge

    How to merge css in wordpress

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How to style Select2 input tags with css and how to limit them

    How to make css two borders?

    How to make the height of the div take all the space?

    How to write CSS selector for this page?

    How would use span to create different styles between selected characters and the rest?

    problem with internet explorer showing html input button which is hidden

    how to use jquery closest function

    how create triangle using css [duplicate]

    How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

    How to reset tag in CSS

    How to create an enumerated tabular environment in HTML/CSS?

    How to perform media queries if either statements are correct?

    How to GPU accelerate CSS transform?

    How to have your own style.css and bootstrap at the same time?

    How to check if a css/js resource is included in head

    How to make hover use border-radius first-child