[Bug]: Modal overlay not showing after upgrade from 1.4.3 to 1.5.0

[jorth3]

Blazorise Version

1.5.0

What Blazorise provider are you running on?

None

Link to minimal reproduction or a simple code snippet

I've had this code in my Blazor app for a long time.  It is a simple pop-up Yes/No dialog asking the user to take action.  When I upgraded to Blazorise 1.7.1 the dialog did not work.  It would darken the screen (the modal's translucent background), but the dialog itself would not appear over the background.  I went back in versions and found it worked in 1.4.3 but not 1.5.0.
<Modal @ref="resetPriorityDialog">
    <ModalContent Centered Class="reset-priority-dialog">
        <ModalHeader>
            <ModalTitle TextColor="TextColor.Danger">Warning</ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Text TextColor="TextColor.Dark">@resetPriorityMessage</Text>
        </ModalBody>
        <ModalFooter>
            <Button Class="reset-priority-button" Clicked="@ResetPriorityModalYes">Yes</Button>
            <Button Class="reset-priority-button" Clicked="@ResetPriorityModalNo">No</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

Steps to reproduce & bug description

Try to display the modal defined by the code above

What is expected?

Model dialog displays

What is actually happening?

translucent dark overlay appears but dialog does not appear anywhere on the screen.

What browsers do you see the problem on?

Firefox, Microsoft Edge

Any additional comments?

Same behavior on Edge and Firefox.

[jorth3]

This is the CSS referenced in the code snippet:
.reset-priority-dialog {
background-color: var(--pop-up-background-color);
}

.reset-priority-button {
background-color: var(--main-border-color);
color: white;
cursor: default;
padding-top: 6px;
margin-bottom: 6px;
text-align: center;
}

[stsrki]

Can you try clearing the cache? In 1.5, we introduced some CSS animations on modals that could affect default bootstrap styling.

PS. We usually add a query version at the end of JS and CSS files so that the browser is always using the latest files, eg.

<link href="_content/Blazorise/blazorise.css?v=1.7.1.0" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css?v=1.7.1.0" rel="stylesheet" />

[jorth3]

I updated to 1.7.1 and tried clearing the browser cache and adding the references but the behavior is unchanged. I still only get the dark translucent backdrop of the dialog, but no dialog. Hitting ESC closes the backdrop as expected. I tried it with Edge, Firefox, and Chrome. I thought maybe it was an issue using iisexpress in my Visual Studio session, so I published the project to our test server and behavior was the same.

Can you try clearing the cache? In 1.5, we introduced some CSS animations on modals that could affect default bootstrap styling.

PS. We usually add a query version at the end of JS and CSS files so that the browser is always using the latest files, eg.

[stsrki]

I'm trying your example and the overlay show for me

Do you maybe have something else in your project CSS that might interfere with the modal? It is best to inspect in devtools.

[jorth3]

I found the issue. I browsed all available nuget packages and saw "Blazorise.Bootstrap5", which I did not have installed. I installed it and now the dialog works as expected. Thanks for your help.

[jorth3]

Do I need both "Blazorise.Bootstrap" and "Blazorise.Bootstrap5" installed, or can I uninstall "Blazorise.Bootstrap"?

[stsrki]

You only need one. Blazorise.Bootstrap5.

[jorth3]

OK thanks. There is one thing I noticed on the dialog now. I lost the 'X' in the upper-right corner. It is now just a very small rectangle.

[jorth3]

Looks like putting an 'X' in the CloseButton tag fixes it.

[jorth3]

I hate to keep bugging you but there's one more thing I noticed. My SelectList component has changed. It used to show the selected item on the button, but now shows the down arrow symbol. In this image you can see how it was on the left, but with the upgrade it shows like the right image.

[stsrki]

I believe you used BS4 before, and now that you have moved to BS5, it will show some differences in the UI. SelectList uses native Select component behind the scenes. And based on the CSS provider, it will pick up those styling. I don't think there is an easy workaround here unless changing the CSS to emulate BS4 styling.

[stsrki]

PS. Have you finished the integration for BS5? Including the bootstrap CSS files?

[jorth3]

Yes I did finish the BS5 integration and the dialogs are working now. I did have to put an explicit 'X' in the CloseButton tag to get that to show up, but everything else in the app is working well, except for this SelectList issue. I think in BS4 I was using styling to hide the down-arrow caret symbol and only show the selected item text.

[jorth3]

FYI, I did find the styling to "push" the caret symbol off the control to hide it. All good now. Thanks.