Modal XL class repeating?

[scl21]

I'm encountering an issue when creating a modal and setting the size toModalSize.ExtraLarge. I found that the html is being rendered with the modal-xl class set on both the modal-dialog and modal-content elements. The result is the modal appears off-centered due to about 240px padding on the right side. Is this a known issue/is there a fix in place?

[David-Moreira]

Not a known issue. can you provide a repro, please?

[scl21]

See link for an example of what is occurring when I'm creating the modal using Blazorise:

https://www.codeply.com/p/Bdt118Neke

I discovered that the issue is a combination of me declaring a max-width of 85% on the modal-xl class, along with Blazorise adding the modal-xl class to both the modal-dialog and modal-content elements. Removing the modal-xl class from the modal-content fixes the issue, as does giving the max-width a pixel value (ie. max-width: 1300px). However I'm not sure why the modal-content is given a size as the Bootstrap documentation says the size should be declared in the modal-dialog element.

[David-Moreira]

Hello @scl21
Although the class is repeated, and this is an oversimplification, the css rules could be something like : modal-dialog.modal-xl and modal-content.modal-xl

Please provide the example with an actual Blazorise setup, as that might not be fully indicative of how Blazorise is actually behaving, and we need a reproducible to investigate and fix any problem there might be.

Can you check whether one of our examples depicts your use case? I believe the Large Modal example is the one you're looking for, and it seems to be to to be working fine:
https://bootstrapdemo.blazorise.com/tests/modals

[scl21]

Hi David,

You're correct, I will set the max-width on the .modal-dialog.modal-xl only. For what it's worth I am attaching screenshots of the issue that I recreated using my browser's developer tools. I set the max-width on modal-xl to 85% and removed the modal-xl class from the modal-content element in the second screenshot.

[David-Moreira]

Hi David,

You're correct, I will set the max-width on the .modal-dialog.modal-xl only. For what it's worth I am attaching screenshots of the issue that I recreated using my browser's developer tools. I set the max-width on modal-xl to 85% and removed the modal-xl class from the modal-content element in the second screenshot.

So If I understand correctly, this is not a problem with Blazorise per say. If you use the Modal Extra Large without any custom changes at all it will work? Is this correct?

@stsrki can you chime in the duplicated class*, is that correct class* for boostrap framework?

[stsrki]

The duplicate modal-xl class name is a simple overlook from our side. I'm trying to reproduce the issue on my side, but it doesn't interfere with the modal size. Bootstrap CSS selectors still work. In any case, I will open a new ticket and remove the duplicate class name.