Closed Valerio81 closed 3 weeks ago
I am experiencing the same issue: the modal does not appear after updating from version 1.4.2 to 1.5.3. Can anyone help with what I should check, please? cleaning browser cache those not work.
Hello @Valerio81, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.
Hi @stsrki, I created a demo project to reproduce the issue: https://github.com/yanezricardo/BlazoriseModalErrorDemo
I found a potential solution based on a comment in another issue. I added the following class to my site.css and the modal now functions as expected:
.modal.show { display: block; }
Thanks!
Hi @stsrki, I created a demo project to reproduce the issue: https://github.com/yanezricardo/BlazoriseModalErrorDemo
I found a potential solution based on a comment in another issue. I added the following class to my site.css and the modal now functions as expected:
.modal.show { display: block; }
Thanks!
Thank you for this demo @yanezricardo 😊 @stsrki in my project the problem don't happens in a specified situation, but randomly
Thank you for the repro.
In your code you didn't specify the blazorise bootstrap CSS file.
It must be as
@page "/"
@using Microsoft.AspNetCore.Components.Web
@namespace BlazoriseModalErrorDemo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
+ <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
<link href="BlazoriseModalErrorDemo.styles.css" rel="stylesheet" />
<link rel="icon" type="image/png" href="favicon.png"/>
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Can you please try adding <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
to your projects?
Yes it works, thank you very much!
I open my Modal using a method
private Task OpenFilter()
{
if (this.ModalService != null)
{
return ModalService.Show<Components.Parts.Modals.ChartFilter>(x =>
{
x.Add(y => y.SelectedDates, this._selectedDates);
x.Add(y => y.OnSuccess, DoOnSuccess);
},
new ModalInstanceOptions()
{
Animated = true,
UseModalStructure = false
});
}
return Task.CompletedTask;
}
with the ModalProvider defined in Routes.razor
[...]
<Blazorise.ModalProvider />
[...]
and all CSS added on my App.razor page
[...]
<link rel="stylesheet" href="_content/Blazorise/blazorise.min.css" />
<link rel="stylesheet" href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css" />
<link rel="stylesheet" href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css" />
[...]
Can you add a query string to the links?
[...]
<link rel="stylesheet" href="_content/Blazorise/blazorise.min.css?v=1.5.3.0" />
<link rel="stylesheet" href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css?v=1.5.3.0" />
<link rel="stylesheet" href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css?v=1.5.3.0" />
[...]
I really suspect that the browser is caching an older version. And CTRL+F5 does not help all the times.
Because I suspected the cache problem, I added a method to append an "hash" to all of my JS and CSS
This code
[...] <link rel="stylesheet" href=@FileVersionhref("_content/Blazorise/blazorise.min.css") /> <link rel="stylesheet" href=@FileVersionhref("_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css") /> <link rel="stylesheet" href=@FileVersionhref("_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css") /> [...]
using this method
private string FileVersionhref(string path) { return Fileversionprovider.AddFileVersionToPath(Program.RootPath, path); }
became this code
[...] <link rel="stylesheet" href="_content/Blazorise/blazorise.min.css?v=eOt59ZYXwX8B9y8l2Se8MEctrFLQUV1RW2bRpVUGEsM" /> <link rel="stylesheet" href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css?v=hXnleQSBxDzH8DsKWNzeVIHl0QPSYVJ2g-5fQ90solg" /> <link rel="stylesheet" href="_content/Blazorise.LoadingIndicator/blazorise.loadingindicator.min.css?v=7viLDAQ1Hte0z3cVhE33JuBjs3qoGoUNImB6Zd9aYkE" /> [...]
But the version in query string not solve the occasionally bug.
It would be hard to help without the reproducible. Especially if the issue is not consistent and only happens on random.
Are you still on 1.5.1?
I'm on 1.5.3
Some users told me the bug happens on "installed" version of my PWA. It also happened 2 or 3 times in the web version (not installed).
After a page reload (or forced close) the modal works again
That seems like caching behaviour, where your users already have downloaded a version that wasn't working. That can only get cleared once they reset the cache or the app goes online again and requests a fresh resource with the "new naming trick" ("hash") like you mentioned
This is an automated message reminding that this issue is expecting the author's answer.
Blazorise Version
1.5.1
What Blazorise provider are you running on?
Bootstrap5
Link to minimal reproduction or a simple code snippet
I cannot reproduce this because it doesn't always happen. For the moment it has only happened to people who "installed" the PWA on the PC.
Steps to reproduce
///
What is expected?
I expect the modal to open
What is actually happening?
Sometimes when the button is clicked, nothing happens
What browsers do you see the problem on?
Chrome
Any additional comments?
No response