Blazor Dialog

bobk · November 19, 2019, 7:53pm

The blazor dialog has a max-height set to 600px.
When using full screen, there is a lot of wasted real estate that I would like to use.

<div class="ui-dialog-content ui-widget-content" style="max-height:600px;height: 100vh">

Is that something that can be set?

thanks!

enchev · November 20, 2019, 4:55am

You can specify height for the dialog:
https://blazor.radzen.com/dialog

github.com

akorchev/blazor.radzen.com/blob/master/Pages/DialogPage.razor#L19


<h1 style="display:inline">Dialog</h1><a style="margin-left: 10px" href="https://github.com/akorchev/blazor.radzen.com/blob/master/Pages/DialogPage.razor" target="_blank">[source code]</a>


<p>This page demonstrates <b>Dialog</b> component.</p>


<RadzenCard>
    <div class="row">
        <div class="col-md-6">
            <h3>Dialog</h3>
            <RadzenButton Text=@($"Show OrderID: {orderID} details") Click="@(args => dialogService.Open<DialogCardPage>($"Order {orderID}",
                          new Dictionary<string, object>() { { "OrderID", orderID } },
                          new DialogOptions(){ Width = "700px", Height = "530px", Left = "calc(50% - 350px)", Top = "calc(50% - 265px)" }))" />
        </div>
        <div class="col-md-6">
            <h3>Events</h3>
            <RadzenCard style="overflow: auto;height:500px;">
                @foreach (var e in events.OrderByDescending(i => i.Key))
                {
                    @e.Value
                    <br />
                }
            </RadzenCard>