0

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:

Inspect

This is the screenshot of what is happening to my app:

Result

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

matiaslauriti
  • 7,065
  • 4
  • 31
  • 43
alex cardoso
  • 13
  • 3
  • 1
    Welcome to Stack Overflow. Please take the [tour] to learn how Stack Overflow works and read [ask] on how to improve the quality of your question. Then [edit] your question to include your source code as a working [mcve], which can be tested by others. – Progman Oct 23 '22 at 08:41

1 Answers1

0

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;
}
Grey
  • 1