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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Blazor Dialog Flex content too large

Thread ID:





150487 Jan 8,2020 10:22 PM UTC Jan 13,2020 08:15 AM UTC Blazor 3
Tags: Dialog
Asked On January 8, 2020 10:22 PM UTC


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" };


Indrajith Srinivasan [Syncfusion]
Replied On January 9, 2020 01:56 PM UTC

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.             

Replied On January 12, 2020 03:59 PM UTC

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;

Indrajith Srinivasan [Syncfusion]
Replied On January 13, 2020 08:15 AM UTC

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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon