How to hide the Sidebar by default when page loaded?
Requirement
Hide the Sidebar by default when page loaded.
Solution
We can render the JavaScript Sidebar in closed state by default by using any of the following ways.
Way 1:
We 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/sidebar-hide1?file=main.ts
Way 2:
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/sidebar-hide2
Way 3:
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/sidebar-hide3
Refer to the below links to know more about Sidebar component.
Documentation: https://ej2.syncfusion.com/angular/documentation/sidebar/getting-started
API reference: https://ej2.syncfusion.com/angular/documentation/api/sidebar/
Live demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/sidebar/default
Conclusion
I hope you enjoyed learning about how to hide the Sidebar by default when page loaded
You can refer to our JavaScript Sidebar feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Sidebar example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
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.
Way 1 works, but only when the sidebar's position is "Left". If you set the sidebar's position to "Right", the sidebar starts in the open position and then immediately closes.
Ways 2 and 3 start in the open position and then immediately close no matter what the sidebar position is.
This will not work for me. I need the sidebar to enter from the right and start in the closed position.
Please fix this. Thank you.