Blazor Dialog Flex content too large

[John]

Hi, 

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

<EjsDialog

           ShowCloseIcon="true"

           AllowDragging="true"

           EnableResize="true"

           

           Visible="false"

           IsModal="true">

    <DialogAnimationSettings Effect="DialogEffect.None" />

    

<DialogTemplates>

        <Header>Header text</Header>

        <Content>

            <div style="height: 80%; min-height: 80%;display: flex;align-items: stretch;flex-direction: column;">

                <p>Some text here</p>

                <div>

                    <EjsToolbar>

                        <ToolbarItems>

                            <ToolbarItem PrefixIcon="e-new-icon tb-icons" TooltipText="New"></ToolbarItem>

                            <ToolbarItem Type="@ItemType.Separator"></ToolbarItem>

                      

                        </ToolbarItems>

                    </EjsToolbar>

                </div>

                <div style="flex: 1; height: 100%; min-height: 100%;">

                    <EjsGrid />

                </div>

            </div>

        </Content>

    </DialogTemplates>

<DialogButtons>

        <DialogButton ButtonModel="@OkBtn" />

        <DialogButton ButtonModel="@CancelBtn"  />

    </DialogButtons>

</EjsDialog>

@code {

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

    private ButtonModel CancelBtn = new ButtonModel { Content = "Cancel" };

}

[Indrajith Srinivasan]

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.

Sample for reference: https://www.syncfusion.com/downloads/support/forum/150487/ze/Blazor_dialog51733098  

 

2. 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.             

 

Regards, 

Indrajith 

[John]

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

<style>

    .overflow-container {

        flex: 1;

        overflow: auto;

    }

</style>

[Indrajith Srinivasan]

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.   

 

Documentation: https://ej2.syncfusion.com/blazor/documentation/grid/scrolling/#responsive-with-parent-container 

 

Kindly get back to us if you have further queries. 

   

Regards,  

Indrajith