Sidebar content is Rendered allthoug IsOpen="false" and is shown when navigating away from the page that includes the sidebar causing flickering of the screen

[Frangoudes Panikos]

Good morning,

I am using Syncfusion Blazor 18.1.0.54.

I have two issues with SfSidebar Component

1.

In many pages I add Sidebar control with varius contents having set the IsOpen="false", using the sidebar with an EditForm for CRUD operations.

The sidebar is shown by a user action by calling sidebarobj.Show() method which works ok.

The sidebar is closed bu a user action by calling sidebarobj.Hide().

The user can show and hide (close) the sidebar as many time as he wants. This works ok.

When the user navigates to a different page the page content is dismissed and BEFORE the new page is rendered the content of the sidebar IS SHOWN FOR A FRACTION OF A SECOND making the change of pages not smooth and not attractive.

The page can have other Dialog Components that work very well without any issues.

I have tried many things in order to solve this but without succes.

2. When ShowBackdrop="true" it seems that  when the sidebar is sidebarobj.Show(),  not only the whole screen is blocked but the entire sidebar too is greyed making the      sidebar inooperative.

     Only the surroundings of the sidebar should be blocked

Can you please advice on the above.

Thank you in advance

Panikos Frangoudes

[Sowmiya Padmanaban]

Hi Frangoudes, 

 

Greetings from Syncfusion support. 

 

We have validated your reported problems with Sidebar component.  

 

Problem 1: When the user navigates to a different page the page content is dismissed and before the new page is rendered the content of the sidebar is shown for a fraction of second making the change of pages not smooth and not attractive. 

 

Solution: To resolve your issue, you need to set Sidebar type as Push for initial loading. It prevents the sidebar component from opening on initial  loading.  And then set isOpen as true for created event of Sidebar component. 

 

<SfSidebar ID="NavMenu" @ref="sidebarObj" Width="300px" ShowBackdrop="true" Created="create" Type="SidebarType.Push" Position=SidebarPosition.Left EnableGestures="false">    

</SfSidebar> 

    public void create() 

    { 

        this.sidebarObj.IsOpen = true; 

    } 

 

Problem 2: When ShowBackdrop="true" it seems that  when the sidebar is sidebarobj.Show(),  not only the whole screen is blocked but the entire sidebar too is greyed making the sidebar inooperative. 

 

Solution: 

 

We have validated this issue with a sample at our end. We were unable to reproduce this issue in Sidebar, since ShowBackDrop property works fine and it adds overlay(backdrop) element to the main content element of the Sidebar, and it will not applied over the Sidebar element. We suspect your reported issue might be occurring in your sample mistake in Sidebar configuration. 

 

For your convenience, we have prepared a sample in which we enabled ShowBackDrop property as true to depict the behavior of Sidebar with this property. 

 

Sample: 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor_backdrop-1765111654.zip 

 

To know more about Sidebar component, please refer the below links. 

 

Demo: https://blazor.syncfusion.com/demos/sidebar/default-functionalities/  

 

Documentation: https://blazor.syncfusion.com/documentation/sidebar/  

 

API Reference: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfSidebar.html  

 

https://ej2.syncfusion.com/documentation/api/sidebar/  

 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Sowmiya.P 

[Alberto Monteverdi]

The posted solution for avoiding entire page flickering doesn't work for me.

I reproduced partially the showcase application "Appointment Planner" exctracting MainLayout.razor into a new server app, but the problem still remains.

Thank You.

Alberto Monteverdi.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Alberto, 

 

We have checked your reported problem. We would like to let you know that, in general when navigating to any other pages in application, Blazor destroys the current page entirely and then renders the navigated page elements in UI, that is the cause of your reported problem. So, this issue is not due to the SF Sidebar component.  

 

To overcome, your reported problem we can display Syncfusion waiting pop-up in the UI until the navigated page is completely render in the UI. In Application planner application, waiting pop-up will display when you navigate using URL link. We are currently checking Application planner application to resolve your reported flicker problem. We will check and update you the further validation details in one business day on 2^nd September 2020. 

 

We appreciate your patience. 

 

Regards, 

Shameer Ali Baig S. 

[Indhumathy Loganathan]

Hi Alberto, 

 

We suggest you to update the Syncfusion package version to the latest(V19.3.55) to resolve the reported issue. For your reference, we have updated the package version and you  can find the sample from below link. 

 

https://www.syncfusion.com/downloads/support/forum/154779/ze/Sidebar1356046098 

 

Please check the sample and let us know if any further assistance required. 

 

Regards, 

Indhumathy L