Modal Blazor dialog stuck at top border when moving it around

[Lowis Schwahn]

After making some changes to my Blazor page's CSS properties, I noticed that my Blazor modal is no longer able to freely move around the screen.

All I can say is that I did not change any properties pertaining to the modal itself nor the modal background.

I am not sure I can give you a copy of the project for you to see what is wrong. However, if you have specific questions, feel free to ask.

I will try to git bisect in order to find out what caused the change.

I attached a screenshot for you to find out what's wrong.

Attachment: 20200619_12_02_13IKON_2_0_a46e76ad.zip

[Lowis Schwahn]

I've attached you the commit that started to cause problems. (found using git bisect) and exported using git show -w --ignore-all-space <sha> > my_commit.diff

I know this might not help much with identifying the problem

Attachment: commit_that_causes_problems_89cc12d.zip

[Revanth Krishnan]

Hi Tobias, 

 

Greetings from Syncfusion support. 

 

We have validated your query “Blazor modal dialog stuck at top border when moving it around after some CSS style changes”. 

 

This issue occurs due to the shared CSS style changes done by you, 

 

Code Snippet: 

 

    app { 

       position: fixed; 

       left: 0; 

       right: 0; 

       bottom: 0; 

       top: 0; 

    } 

 

By default the app position is `relative`. So when changing the position to `fixed` makes the dialog not interactable as the dialog component’s position are relative to the app. 

 

So we suggest you to change the app position style as relative or this issue can be resolved by making the dialog’s target as app. 

 

Code Snippet: 

 

app { 

       position: relative; 

       left: 0; 

       right: 0; 

       bottom: 0; 

       top: 0; 

    } 

 

 Or 

 

<SfDialog Width="300px" Target="app" AllowDragging="true" EnableResize="true" ShowCloseIcon="true" IsModal="true" @bind-Visible="Visibility"> 

        <DialogTemplates> 

            <Header> Resize Me!!!</Header> 

            <Content> This is a dialog with resizable support. </Content> 

        </DialogTemplates> 

        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents> 

    </SfDialog> 

 

Please let us know and confirm whether the above code snippet help to resolve the issue. 

 

Regards, 

Revanth 

[Lowis Schwahn]

Hello Revanth,

yes, setting the dialog target to "app" fixed the issue for me! Thank you, much appreciated!

[Indrajith Srinivasan]

Hi Tobias,

Thanks for the update, 

  

Please let us know if you need any further assistance.

Regards, 

Indrajith