live-preview-root messing up my html and css grid

Question

I have a web app that I am using CSS grid on and have never come across this before. I have a live-preview-root div in my html and it is ruining my layout. This is the inspect screenshot

This is the screenshot of what is happening to my app

I'm hoping someone can shed some light on what could be happening here.

Answer 1

The live-preview-root element is being added by Visual Studio Browser Link, which is used for the "Browser Link" or "Hot Reload" feature ( Even if you have "Browser Link" disabled, it will be added. )

In this forum post in Microsoft Developer Community and this related StackOverflow question , it looks like the "Browser Link" element and code is injected if you have "Browser Link" or "Hot Reload" enabled.

If you want to remove the live-preview-root element entirely, you have to disabled "Browser Link" and "Hot Reload", as suggested in the related StackOverflow question.

---

I like having "Hot Reload", so instead I added a CSS script in the development environment to display: none the live-preview-root element; this fixed my grid layout styling.

In your layout file:

<environment include="Development">
    <!-- Hide the browser-link element, which screws up our styling -->
    <link rel="stylesheet" href="~/css/browser-link.css"/>
</environment>

browser-link.css :

live-preview-root {
    display: none;
}