Modal Dialog height issue without sidebar

[Aleksei]

I created new Layout without sidebar

In Blazor content, based on this Layout, I put modal Dialog

    SfDialog @bind-Visible="@IsVisible" IsModal="true" ShowCloseIcon="true" Width="440" Height="1000">

    /SfDialog>

   

if I insert for my Layout

        div class="sidebar">

        /div>              

 Height="100" for my modal is working. But without sidebar, Dialog has fixed height, and I can't change it.

[Indrajith Srinivasan]

Hi Aleksei, 

 

Greetings from Syncfusion support, 

 

We have validated the reported query and able to reproduce the issue from our end. If you have specified larger height than the body’s height, the dialog gets the height based on that body element height and it is set as max-height style of the dialog.The height of the dialog is not set since the body height is lower, when the sidebar div is removed which has a default height. In order to resolve this, you can set the height for the html and body in the site.css file.

CSS style 

 

 

html, body { 

   height: 100%; 

} 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Waldemar Nowak]

I have spent some time trying to investigate why my dialog is so low and ignores Height. The suggestion of CSS style helped:

html, body { 

   height: 100%; 

} 

Please update Dialog documentation to describe this solution.

[Indrajith Srinivasan]

Hi Aleksei,

Thanks for your suggestions, 

We will document this scenario with Dialog and the changes will be published in the live documentation site on or before our 2020 Volume 2 SP 1 release. 

Regards,
Indrajith

[Indrajith Srinivasan]

Hi Aleksei,

We couldn't include the documentation with dialog with our Volume 2 SP 1 release. We will document it on or before our Volume 3 main release.

Regards,
Indrajith

[Indrajith Srinivasan]

Hi Aleksei,

We have now documented the SfDialog target height usage and it is now refreshed in the live link.

https://blazor.syncfusion.com/documentation/dialog/getting-started/#run-the-application

Regards,
Indrajith