Error when using Max-height and max-width in global CSS class[Bug]

Describe the bug I set a global Class parameter to a custom CSS format and tried with max-width and max-height properties, but it gave me a weird, half-translucent modal. The modal is greyed out, and if I click on anything it closes the modal. I can’t interact with the modal The header for the modal is also in the wrong spot, off to the left of the content

To Reproduce Steps to reproduce the behavior:

1. In Apps.razor set <CascadingBlazoredModal ContentScrollable="true" Class="custom-modal-class">
2. In site.css add

.custom-modal-class {
    max-width: 90%;
    max-height: 90%;
}

1. Open modal

Expected behavior My goal is to have max height set to 95% and the scroll bars for anything taller than that. I’d ideally also like to have max width at 80% and then wrap content as necessary. Last resort is having horizontal scoll bars.

Screenshots With max parameters set, showing bug. Note that the header, which says “IssuePopup Blazored” is off to the left of the body of the modal

Without parameters, showing modal normally

Hosting Model (is this issue happening with a certain hosting model?):

• Blazor Server

Additional context To be honest, my CSS skills are pretty light. I’m willing to bet that the issue is me 😃

[aterbo]

Yeah, if there were some sort of programmatic enforcement, it would definitely need to allow the developer to overwrite or remove properties as they prefer, as long as they know what needs to be included. If you would prefer just to update the wiki, totally fine.

I think the main concern is to inform users that there are styles that are necessary to keep the modal from breaking, and these all needed to be provided in any custom class since the code will overwrite all defaults.

• display: flex; (needed to keep default header alignment)
• flex-direction: column;
• z-index: 102; (needs to be higher than other classes for visibility)
• background-color: #fff; (or any background)

If you want, I’m happy to write an update to the wiki clarifying this and provide it as a PR.

For the max height, I think I pointed you at the wrong thing. My fault. I’ll take another look at it and get back to you.

[larsk2009]

I don’t think we should enforce anything when settings a custom class, as it is up to the implementing developer to decide how they want to style the modal. If we enforce it but a developer doesn’t want to use that specific property, then what should they do? Or if we only overwrite and keep the basis, what if they want to remove something from that basis?

I do agree it might be a good idea to clarify this in the documentation if it is unclear.

I can’t find the max-height thingy which you say is the examples, but that is probably me. Where exactly should I be looking?