Dialog Service Open dialog with max-width

Radzen.Blazor Components
1

Is it possible to make dialog max-width instead of width?

Reason I am asking is I want to set maximum width for dialog to limit its size for large displays. And at the same time to allow it to shrink to fit display if its less then width value.

Because now if I set width 1000px and change window size to 600px width I loose 200px dialog on both sides this hides close button on the header too.....

I have tested and max-width atribute works fine

2

This isn't supported out of the box but you can always use CSS to override any setting. The !important modifier will allow you to even override inline CSS.

3

Dialog content is generated after DialogService.Open is executed. Which means I would need to add a custom css class or Id attribute in order for this to work but I cannot (or atleast I am not aware of how this can be done). Otherwise, how I can have different dialog widths since all of them has different size? In addition to that, how I then could open dialog from within a dialog with smaller width size?

4

Hi @bomner ,

In a Blazor Server project I'm working on I have a lot of dialogs. My solution to your questions has been to have an extension method on DialogService like so:

        public static async Task OpenComponentExtension<T>(this DialogService dialogService, string title, Dictionary<string, object> parameters = null, DialogOptions options = null) where T : ComponentBase
        {
            string additionalStyle = "min-width:fit-content;min-height:fit-content;height:fit-content;width:fit-content;border: 1px solid black;";
            var newOptions = new DialogOptions();

            if (options is not null)
            {
                newOptions = options;
            }

            newOptions.Style += additionalStyle;

            await dialogService.OpenAsync<T>(title, parameters, newOptions);
        }

I am just using the same OpenAsync method of DialogService, but with the addition of just the necessary css to make every dialog I open as big as its contents.
Now you can open dialogs of different sizes - based on their own content.