asp.net-coreblazor

Bootstrap theme breaking on page navigation or hot reload

I implemented a Bootstrap theme using Blazor. Everything seems to work properly, except when I navigate to a new page or use hot reload in Visual Studio. In those cases the css seems to break a bit (but not massively). A reload fixes it. Does anybody have any idea how I can fix this or figure out what's going on?

This is what it normally looks like:

enter image description here

And this is what it looks like after a hot reload or page navigation:

enter image description here

So it's less wide and the icons and positioning are getting messed up.

I don't see any errors or warning in the console.

I have the blazor script at the very end of the body tag:

    <script src="_framework/blazor.web.js"></script>
</body>

I created the project using the Blazor Web App template, using .NET 8. "Interactive render mode" is set to "Server" and "Interactivity location" to "Per page/component".

I'm unfortunately unable to share my git repository, since I'm using a paid Bootstrap theme, which doesn't allow me sharing it.

Solution

  • 1.I don't know you use source files or compiled files. you can check your import method with the guides : https://themes.getbootstrap.com/guide/#framework-integration-guides

    2.The html loading sequence is to load the <head> first and then the <body>. importing external styles and scripts loads asynchronously.your should link your css file is in the <head> tag

    3.I don't know if there are any problems with your project other than the incorrent presentation of the icon style. If just the icon incorrent presentation，you can only check the icon css file.

    There are two possibilities for this.

    1). Appear certainly,the imported css file is too large.The first load is in complete because the file is too large. You can delete some styles and come icons that you don't need and then compress the file

    2). Occasionally , the network is slow .The page didn't render the first time, the second refresh mostly reads the cache . you can open the Browser console and clear cache then slow down the network speed that ensure the problem can be repeated frequently.You can alse delete some styles and icons you don't need and then compress the file or maintain network stability.

    Set network:

    enter image description here

    If you use source files,you also can try to use webpack divide the large file into several smaller files to load.