ASP.NET Core MVC - inline css style not applied

Question

I have a strange behavior that in my ASP.NET MVC project when I apply inline styling to html elements - they are not shown in the browser. But if I put the same styling in an external css file using a css class it will work (even putting the css class in a <style> tag on the same page doesn't work.

Example:

NOT Working

<div style="height: 100px; width: 100px; background: red;">
    ABC
</div>

NOT Working

<!DOCTYPE html>
<html>
<head>
    <style>
        .myClass {
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="myClass">
        ABC
    </div>
</body>
</html>

Working

mystyle.css

.myClass {
    height: 100px;
    width: 100px;
    background: red;
}

index.cshtml

<div class="myClass">
    ABC
</div>

If I don't use a cshtml file and just load a static html file then all variations work.

Why is that? How do we fix it?

Have you checked with the browser F12 tools? Does it show the styles in HTML? If you inspect the element does it show them as getting overridden or something (at least Chrome shows this)? — juunas
– juunas, Commented Jun 15, 2017 at 10:27
Your HTML works if I try it. It means there is some other style overriding it. As juunas mentioned try developer tools and check what is overriding it. You can add !important to inline style to ensure your style is applied. — Vijay
– Vijay, Commented Jun 15, 2017 at 10:46
Checked with F12 - no style override. Did you check it as a 1cshtml file or as a regular file? — developer82
– developer82, Commented Jun 15, 2017 at 10:47
I have actually been able to reproduce this issue. I'm developing in Visual Studio 2017 and running Chrome. The page source has the correct inline styles but the browser will not render them on load. However, if I use the F12 dev tools and I un-check the inline style and then re-check the style it is applied. — Andrew Hawes
– Andrew Hawes, Commented Sep 13, 2017 at 7:40

RonC · Accepted Answer · 2017-06-15 12:06:04Z

1

At the end of the day, what truly matters in this case is the code that's sent to the browser, not the backend means that was used to send the code to the browser. If it works when you send it via an html page but it doesn't work when you send it via a cshtml page then something different is being sent to the browser in these two cases.

So the key to understanding the issue is to figure out what's different. Use developer tools to view source on the page sent via the html page, and view source on the page sent via a cshtml page. Compare the html sent in both cases. Given that the sample code is quite small it should be easy to spot the difference. Once you find the difference, you will have a good clue as to what's going on.

answered Jun 15, 2017 at 12:06

RonC

34.4k21 gold badges105 silver badges150 bronze badges

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

Comments

AFract · Accepted Answer · 2017-06-15 13:08:31Z

0

Your code sample doesn't contain anything related to MVC, therefore it should be sent "as is" to your browser. So if it works in a simple .htm file (and it is), it will also work in a .cshtml, unless you forgot to tell us something about "what is not working".

Depending of your browser, you can use F12 or Ctrl U (etc) key to see page source, and check if it matches what you put in your editor. You can also use Developer tools, or Firebug in Firefox to examine exactly which style is applied to which element.

Also, if your sample is not complete, your MVC website is maybe using some features as a layout page and some default CSS which prevent your inline style to do exactly what you were expecting.

answered Jun 15, 2017 at 13:08

AFract

9,7887 gold badges57 silver badges82 bronze badges

1 Comment

Enrico Over a year ago

I think you misunderstood the question :)

Collectives™ on Stack Overflow

ASP.NET Core MVC - inline css style not applied

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related