1. Home
  2. Forum
  3. Blazor
  4. Glitch Issuee in the background when closing the Dialog

Glitch Issuee in the background when closing the Dialog

When i try to close the Dialog box background glitch appears. how to solve this? i have added small video. 


Attachment: Modal_Glitch_cd072842.rar

3 Replies
PK Priyanka Karthikeyan Syncfusion Team August 6, 2024 01:30 PM UTC

Hi Kavindu Gamage,

 

We've prepared a sample based on the details you provided but were unable to replicate the problem on our end.

For your reference, you can view the sample and video illustration here:

 

Sample: Blazor Playground Sample



 

To help us better understand and diagnose the issue, could you please share the relevant code snippet? Additionally, let us know if you are using a standard dialog or a predefined dialog. This information will assist us in reproducing the issue more accurately and enable us to provide a more effective solution.

Thank you for your cooperation and understanding.

 

Regards,

Priyanka K


KG Kavindu Gamage replied to Priyanka Karthikeyan August 7, 2024 05:02 AM UTC

Hi Priyanka Karthikeyan,

I added my code for your reference. this modal is on NavMenu in Blazor server app. I found that if i change the overlay background color to transparent glitch dissapears. but that is not a solution for me. 

  .e-dlg-overlay {

       background-color: transparent; 

  }

Hope this information will help you. Thank you in advance.


Attachment: Test_84b0f5b6.rar

PK Priyanka Karthikeyan Syncfusion Team August 15, 2024 11:21 AM UTC

Hi Kavindu Gamage,

 

When the IsModal property is set to true, the Syncfusion Blazor Dialog component applies the e-dlg-overlay class to create a modal effect by preventing interaction with the background, which is typically rendered as a grey backdrop. However, if you prefer to maintain modal functionality without this grey backdrop, you can modify the styles accordingly. By setting the display property of the .e-dlg-overlay class to none, you can effectively hide the overlay while still ensuring that the dialog remains focused and interactive. Please examine the following code example and the provided sample link for guidance.

 

 

 

 .e-dlg-container .e-dlg-overlay

    {

      display: none !important;

    }

 

 

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


If you find that this approach doesn't fully meet your requirements or if you have any additional questions or need further assistance, please don't hesitate to reach out to us. We are here to help and provide further guidance as needed

 

Regards,

Priyanka K


Loader.
Up arrow icon