[Bug]: Blazorise 1.5.1 Material UI modals stopped working

[njannink]

Blazorise Version

1.5.1

What Blazorise provider are you running on?

Material

Steps to reproduce

I updated to Blazorise 1.5.1 and my modals stopped working. I only see the shadow background, but the actual model isn't visible. I inspected the html and the actual modal and all content is being rendered. Only its not visible. Any idea what might have changed?

[stsrki]

We made some changes to the modal animation with CSS. Try claring the cache and see it it helps.

PS. our demo seem to be working https://materialdemo.blazorise.com/tests/modals

[njannink]

Cleaning cache I already tried and didn't solve the issue. Also not something we can tell our customers

[stsrki]

It usually helps just by adding the query version at the end of the link file, eg,

<link href="_content/Blazorise.Material/blazorise.material.css?v=1.5.1.0" rel="stylesheet" />.

Do you have some other CSS in your project that might affect the modal?

[njannink]

I found the issue. The modal stays on display: none. If I add this css it fixes my problem:

.modal.show {
    display: block;
}

With previous version making a modal visible would set this style on the div display: block;--modal-animation-duration: 150ms

[travelmarx]

It usually helps just by adding the query version at the end of the link file, eg,

<link href="_content/Blazorise.Material/blazorise.material.css?v=1.5.1.0" rel="stylesheet" />.

Do you have some other CSS in your project that might affect the modal?

Thanks! I was going crazy having updated from 1.4 to 1.5 with Bootstrap5 and modals stopped working. Yes, I could see it was only a display issue, but didn't think about using v=1.5.1 at the end of the stylesheet link in my case in app.razor.

[njannink]

I'm using the query part already for long time so that didn't fix it for me. I have a helper method for constructing content uri's. So after an update all uris are automagically updated aswell.

<link rel="stylesheet" href="@(Helper.GetContentUri<Blazorise._Imports>(@"blazorise.css"))" />
<script src="@(Helper.GetContentUri<Blazorise.Material._Imports>(@"blazorise.material.js"))"></script>

public static string GetContentUri<T>(string file)
{
    var assembly = typeof(T).Assembly;
    var assemblyName = assembly.GetName();
    var version = assemblyName.Version?.ToString(3) ?? @"1";
    return $@"./_content/{assemblyName.Name}/{file}?version={version}";
}

@stsrki maybe also usefull for the Blazorise library. Saves a lot of manual updates :)

[stsrki]

Thanks, I will try to improve it for 1.5.2.

[njannink]

@stsrki oops. The PR is closing the wrong defect. it should close #5439 and not this one

[stsrki]

I'm unable to reproduce the problem on my side. Modal works as expected. Do you guys still have the same problem?

[njannink]

I fixed it by adding the following css:

.modal.show {
    display: block;
}

So probably some other component or css sets this in your case.

I use the material provider btw