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

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.

Reply | Reply with quote

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();

}

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.

Reply | Reply with quote

Goutham

Replied On June 4, 2019 10:14 AM UTC

Thank you.

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US