We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

145030 Jun 3,2019 11:08 AM UTC Oct 14,2020 05:16 AM UTC Angular - EJ 2 5
loading
Tags: Sidebar
Goutham
Asked On June 3, 2019 11:08 AM UTC

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 [Syncfusion]
Replied On June 4, 2019 07:35 AM UTC

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(); 
} 
 
 
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
Replied On June 4, 2019 10:14 AM UTC

Thank you.

Ashokkumar Balasubramanian [Syncfusion]
Replied On June 4, 2019 11:00 AM UTC

Hi Goutham, 
 
Most Welcome. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Matt Wright
Replied On October 13, 2020 10:15 PM UTC

@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 [Syncfusion]
Replied On October 14, 2020 05:16 AM UTC

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. 
 
 
 
Please, let us know if you need any further assistance. 
 
Regards, 
Shameer Ali Baig S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon