We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Blazor Dialog Flex content too large


I am having trouble laying out components (using flex) within a Dialog with buttons.  If I change the outer flex div from 80% to 100% it uses too much space.  If I remove the 100% on the EjsGrid div, it also does not work.

If anyone can tell me what I am doing wrong, that would be great,  Thanks!

@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons


    <DialogAnimationSettings Effect="DialogEffect.None" />
        <Header>Header text</Header>
            <div style="height: 80%; min-height: 80%;display: flex;align-items: stretch;flex-direction: column;">
                <p>Some text here</p>

                            <ToolbarItem PrefixIcon="e-new-icon tb-icons" TooltipText="New"></ToolbarItem>
                            <ToolbarItem Type="@ItemType.Separator"></ToolbarItem>
                <div style="flex: 1; height: 100%; min-height: 100%;">
                    <EjsGrid />
        <DialogButton ButtonModel="@OkBtn" />
        <DialogButton ButtonModel="@CancelBtn"  />

@code {

    private ButtonModel OkBtn = new ButtonModel { Content = "OK", IsPrimary = false };
    private ButtonModel CancelBtn = new ButtonModel { Content = "Cancel" };


3 Replies

IS Indrajith Srinivasan Syncfusion Team January 9, 2020 08:56 AM

Hi John , 
Greetings from Syncfusion support 
We have validated your query “it uses too much space” with shared code snippet. By Default, Blazor dialog adjusts its width and height based on specified target. If target is not specified, it picks the ‘document.body’ as target. So, the dialog renders by occupying document.body’s width and the flex-box elements doesn’t cause dialog’s width.    
In order to resolve it, we can follow the below ways. 
  1. You can specify static width to the Dialog.
  1. Specify the target to the dialog that the dialog displays over on it.
Could you please try out the above solution and confirm whether it meets your requirement? Else please revert us with your requirement details.             

JO John January 12, 2020 10:59 AM

Dear Indrajith.  Thank you for the reply.  I ended getting it working, so that Grid(s) will scroll both horizontally and vertically using the following style, as demonstrated in the image.  If this is not the best way, please let me know.  Many thanks, John

    .overflow-container {
        flex: 1;
        overflow: auto;

IS Indrajith Srinivasan Syncfusion Team January 13, 2020 03:15 AM

Hi John,  
Yes, you can achieve your requirement using your solution. Or you can also refer our UG documentation on adjusting the Grid height and width based on the its parent containers height and width.   
Kindly get back to us if you have further queries. 

Live Chat Icon For mobile
Up arrow icon