SfDialog height

[Amjad Khan]

With SfDialog, do I need to set a height for the control like this?

<SfDialog IsModal="true" Width="550px" Height="175px" @bind-Visible="@Confirm">

If I dont give it a height, I see scroll bars where the main content text is. So can't this be set dynamically without me setting the Height parameter and the dialog height adjusting itself based on the content but NOT show the scroll bars?

Regards,

Amjad.

[Revanth Krishnan]

Hi Amjad, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “If I don’t give it a height, I see scroll bars where the main content text is. So can't this be set dynamically without me setting the Height parameter and the dialog height adjusting itself based on the content but NOT show the scroll bars”? 

 

By default, if the dialog ‘Height’ is not set, the dialog height will be adjusted automatically based on the content. We tried to reproduce the issue with the shared code snippet of the dialog, but we couldn’t reproduce the issue from our end. 

 

We have prepared a sample for your reference, 

Sample: https://www.syncfusion.com/downloads/support/forum/163308/ze/Dialog_App-929932488 

 

Can you please share us with the following details, 

• The package version used in the application.
• The code snippet of the content displayed in the Dialog.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing code.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[Amjad Khan]

 I think you may be right. I also dont see the scroll bars anymore.

I had initially used the following code to remove height:

private void beforeOpen(BeforeOpenEventArgs args)

    {

        args.MaxHeight = null;

    }

But now I have removed this and the application is still working fine.

Don't know why the scroll bars were appearing. Do I need to have any css classes in the app for the dialog box to work properly by default?

Regards,

Amjad.

[Revanth Krishnan]

Hi Amjad, 

 

 

Good day to you. 

 

 

We are glad that the reported issue has been resolved. 

 

Also, we have validated your query “Do I need to have any CSS classes in the app for the dialog box to work properly by default”. 

 

No, there are no CSS classes needed for the Dialog by default to work properly. Please let us know if you need any further assistance. 

 

Regards, 

Revanth 

[jorge]

Hi.

This is happening to me also and I think that I know why. What I don´t know is how to fix it.
For the div with id " dialog-{guid}" is set element.style {max-height: 4px}

I download your project and it is as expected, but the same SfDialog in my project no. Should be something else in my project then. But I don´t find it. I don´t set this max-height anywhere.

Thanks

EDIT: Finally I resolved it with (below), regardless I donlt like to have to do it

<style>

    .e-dialog {

        min-height: 300px !important;

    }

</style>

[Kokila Poovendran]

Hi jorge,

Thank you for reaching out to us regarding the issue you encountered with the SfDialog in your project.

Upon reviewing your concern, it appears that the dialog control's rendering might be affected by the height settings in your project. Typically, when the dialog is rendered based on the body, it inherits its height from the body element. However, if the dialog's height exceeds that of the body, adjustments may not occur as expected.

To address this issue, we recommend applying specific CSS styles to ensure proper rendering of the dialog. You can utilize the following CSS code snippet:

html, body {

   height: 100%;

}

Sample: https://blazorplayground.syncfusion.com/BjVfDJjThtNziesO

By applying this style, you can ensure that the dialog adjusts appropriately within your project environment.

If you encounter any further difficulties or have additional questions, please feel free to reach out. We're here to assist you.

For further reference and understanding, you can consult our documentation on Dialog Component:  https://blazor.syncfusion.com/documentation/dialog/getting-started#add-blazor-dialog-component