Adding AddRazorRuntimeCompilation() to the container in .NET CORE 6 will break the CSS footer

Question

I create a brand new ASP.NET Core MVC project using VS 2022 and .NET Core 6. VS will generate the base template and when I run it without touching any code, everything is fine.

So far so good.

Now I add the NuGet dependency Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation version 6.0.0.

In Program.cs file, I add a line

// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages().AddRazorRuntimeCompilation(); //Add this line of code
var app = builder.Build();

Rebuild the program and run it. Now I see the footer is not at the bottom of the page anymore.

Is it a bug or did I do something wrong here? Thanks.

Brutify

Do you have this problem in a local development environment? – Elative

Yes, it is in local environment (localhost). – Brutify

Answer 1

I was struggling the same problem as well,
while trying the versions of Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation nuget package and found the solution with 5.0.13 version.

If you downgrade the package from 6.0.1 to 5.0.13, the problem goes away and footer will be on bottom again.

Schnitzel

Tried this with high hopes, but it didnt work unfortunately. – Aspirin

Answer 2

What is happening is that when you enable runtime editing, the .NET Core built in bundle and minification is removed. If you look at shared/_layout.cshtml, there is a _layout.cshtml.css file. This is the runtime bundle/include you are missing. Since this is your core layout, move the contents from this file to your wwwroot/css/site.css file and the footer and other elements will render as before.

Passementerie

What if you have this problem with a css that you do not want to apply to the wwwroot/css/site.css file? Is there a way to use AddRazorRuntimeCompilation() and keep the isolated css working? – Aspirin

Answer 3

In Visual Studio 2022, there's an option for hot reload on file save. this fixed my issue without having the need to install Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation

Seclusive

Working on JetBrains Rider which has no hot reload, so I'm forced to use AddRazorRuntimeCompilation() – Aspirin

It appears this answer has an image describing where this is set. – Latinism

Answer 4

Installing Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation version 5.0.17 Nugget Package cleared the error for me. You may try to install any version from 5.0.0 - 5.0.17

Hawking

Answer 5

Is it your intention to actually use RazorPages? It looks like you just want to add runtime compilation to the standard MVC views.

If you intend to use controllers and views, just add:

builder.Services.AddControllersWithViews().AddRazorRuntimeCompilation();

But, I tried your code as well and in my environment, the footer is present in both cases, even if I downgrade Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation from version 6.0.1 to 6.0.0.

Langston

I have the exact same issue and can reproduce the OP. As soon as you add AddRazorRuntimeCompilation() the scoped css classes stop being rendered and you loose the bootstrap footer style, which makes it go up the page and be thin – Aspirin

Answer 6

I think there's no need to add the runtime compilation since in the newest update/version hot-reload has been officially released.

PS. I am currently following an asp.net tutorial and I encountered this problem. Here's the link: https://youtu.be/hZ1DASYd9rk

Ette

Answer 7

I'm watching same video series as you do and i had the same error. I upgraded Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation to v6.0.11 and I don't get any error anymore I

Holo

Answer 8

I had the same problem but I solved it by adding this CSS in either Site.cs or _layout file:

in site.css :

    body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    }
    .footer {
    text-align: left;
    padding: 1rem;
    background-color: #f8f9fa;
    margin-top: auto;
    }

Or in _Layout.cshtml in head section add style tag:

    <style>
         body {
           display: flex;
           flex-direction: column;
           min-height: 100vh;
           margin: 0;
         }
        .footer {
           border-top: 1px solid #ddd;
           text-align: left;
           padding: 1rem;
           background-color: #f8f9fa;
           margin-top: auto;
        }
    
    </style>

and the footer back to a correct position.

Updraft