Toast CSS fails until manual screen refresh applied

[irdublu]

Project is WebAssembly in .Net 5.0.

I've followed the guidance in ReadMe and when first viewed the toast has no styling. I've found two ways to get the styling to appear:-

• Do a manual page refresh
• Place the code <link href="_content/Blazored.Toast/blazored-toast.css" rel="stylesheet" /> in the razor page as well as wwwroot/index.html.

Both solutions are undesirable.

I see the FAQ on this subject and checked that the bulk of any existing css z-indices are under 5 so made a copy of blazored-toast.css and set its z-index to 999. Even though I now call that new css file and not the _content file, there is still no styling on first load.

When I use dev tools and look at the elements, the first load has no blazored css but on a refresh it appears (and works). This makes me think it may not be a lack of understanding of blazored but that I may have a design problem of my making but I can't think what.

Can anyone tell me what else I should do please.

[chrissainty]

Hi @irdublu, this has always, and without exception I believe, been a browser caching issue. You only need to reference the file in either the _host.cshtml or index.html depending on which hosting model you're using.

[irdublu]

Chris, thank you for replying. It is working. I didn't have to change any code relating to Blazored. Instead, I discovered an error in a line of code that did some logging. I don't have the technical knowledge to know precisely how it stopped the CSS loading. Even though my client retrieved data from the API, I didn't realise there was an exception occurring and it must have interrupted the flow of the code and somehow stopped the CSS from working. Once I corrected the logging code, I found the secondary benefit is Blazored Toast works perfectly. Shame I didn't discover the logging error before posting my question.