How to hide side bar by default when page was loaded.

[Goutham]

Hi,

       i tried different methods like e-hidden class (it is hiding the side bar but i am unable to open it again through hide() and show() methods).Second method i was tried using style property visibility hidden(same happened with this case also)

Below is code snippet:

                    <ejs-sidebar id="sidebar-menu" class="dock-menu side-menu" #sidebarMenuInstance [width]='width'

                     [mediaQuery]='mediaQuery'  position="over" (created)="onCreated($event)" style='visibility:hidden'

                     [showBackdrop]="true" [closeOnDocumentClick]="true">

                     </ejs-sidebar> 

ts file:

 public onCreated(args: any) {

    this.sidebarMenuInstance.element.style.visibility = '';

  }    

Problem:The above code snippet is hiding the side bar but taking a little bit amount of time to hide when page was loaded.
Requirement:default hide of side bar when page has loaded.

[Ashokkumar Balasubramanian]

Hi Goutham, 

 

Good day to you. 

 

You can render the Sidebar in closed state by default by using any of the below methods.  

 

 

 

a.     You can set the type property as (Push, Slide, Over) to render the Sidebar in closed state on initial rendering. Please check the below sample for your reference.  

       

            Sample: https://stackblitz.com/edit/angular-gruji2-evbrdv  

  

b.     Dynamically, updating the isOpen property as false in the created event as shown below. 

 

function onCreate() { 

        // Hide the sidebar element on creation using isOpen property 

        this.sidebarInstance.isOpen = false; 

        this.sidebarInstance.dataBind(); 

} 

             

            Sample: https://stackblitz.com/edit/angular-gruji2-ztioyk 

 

c.      Calling hide method in the created event as shown below. 

 

function onCreate() { 

        // Hide the sidebar element on creation using hide method 

        this.sidebarInstance.hide(); 

} 

 

Sample: https://stackblitz.com/edit/angular-gruji2-foshej 

 

Advantage of using Auto over other types:  

 

Renders Sidebar in Push type in desktop mode and Over type in mobile mode, this way you can render the Sidebar to adapt its behavior based on the device resolution. Please note that sidebar will always expand on initial rendering regardless of isOpen and mediaQuery properties in both desktop and mobile modes with Auto type.  

 

Please let us know, if you have any concern on this. 

 

Regards, 

Ashokkumar B. 

[Goutham]

Thank you.

[Ashokkumar Balasubramanian]

Hi Goutham, 

 

Most Welcome. 

 

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

 

Regards, 

Ashokkumar B. 

[Matt Wright]

@Ashokkumar Balasubramanian [Syncfusion]

None of your examples work as described. 

A. The sidebar does not work at all.

B. The sidebar starts in the out position and then immediately hides. 

C. Does the same as B.

I am very frustrated by the inability of the sidebar to initialize in the closed position. I am not using it as navigation, but rather as a settings menu and I need it to work this way. 

I am using Vue.js

Thank you,

Matt

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Matt, 

 

Greetings from Syncfusion support. 

 

We have validated your reported problem that Sidebar is still visible when page load.  

 

In all browser’s workflow, first it will render the HTML elements of a HTML page. Then, the styles and scripts of the corresponding page will be compiled for applying it to the already available HTML elements in the page for draw the structural design of that HTML page. 

 

On initial rendering Sidebar’s HTML element appears on the screen with window width, and then modifies to its actual structural dimesion due to the above described browser behavior. Your reported problem occurs. 

 

To overcome this problem, we can added a class “e-hidden”(which has Style property has display as none) which hides the Sidebar element while its render is in progress, then we can remove the class from the Sidebar element on its created event, which will meet your requirement of initializing Sidebar in collapsed state. 

 

Please, check out the sample with the above solution below. 

 

Sample: https://stackblitz.com/edit/load-sidebar-ng-hidden-initially?file=app.component.ts  

 

 

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

 

Regards, 

Shameer Ali Baig S.