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

Sidebar 'Auto' functionality

Thread ID:

Created:

Updated:

Platform:

Replies:

149302 Nov 21,2019 05:08 AM UTC Nov 25,2019 03:23 PM UTC JavaScript - EJ 2 3
loading
Tags: Sidebar
Grant EFive
Asked On November 21, 2019 05:08 AM UTC

The documentation for the Sidebar types indicates that when in responsive mode, and at a smaller breakpoint, that the sidebar will operate in 'Over' mode.

From the demo here (narrow the window to a more 'handheld' width), it actually seems to be operating in 'Push' mode. 

Keerthana Rajendran [Syncfusion]
Replied On November 22, 2019 08:36 AM UTC

Hi Grant, 
 
Greetings from Syncfusion support. 
 
We have analyzed your query about sidebar over mode. In sidebar component, during initial rendering we have checked whether the component is initialized in mobile or desktop device. If it is the mobile device, we operated the sidebar in over mode else the sidebar will open in auto mode (like push). In your case, you have dynamically changed the desktop to handheld resolution. But during initial rendering, captured device detection is same as desktop, this is the reason for your concerns. In that case, you have to manually refresh the sample to recognize the device mode and the sidebar will act as an over mode. 
 
Regards, 
Keerthana.  


Grant EFive
Replied On November 23, 2019 12:16 AM UTC

Hi Grant, 
 
Greetings from Syncfusion support. 
 
We have analyzed your query about sidebar over mode. In sidebar component, during initial rendering we have checked whether the component is initialized in mobile or desktop device. If it is the mobile device, we operated the sidebar in over mode else the sidebar will open in auto mode (like push). In your case, you have dynamically changed the desktop to handheld resolution. But during initial rendering, captured device detection is same as desktop, this is the reason for your concerns. In that case, you have to manually refresh the sample to recognize the device mode and the sidebar will act as an over mode. 
 
Regards, 
Keerthana.  


I tested what you described, and even with my browser narrowed as far as it can, if I refresh, the sidebar is still in 'push' mode. I then tested with Chrome's 'Device mode' - and can see that, when the breakpoint is lower the sidebar does launch in 'open mode... but then resizing the window to a wider breakpoint just opens the sidebar over the top of the content

IMHO, it's also not really 'responsive' (in the generally accepted web definition of the term) if you have to refresh the screen...

I was hoping the sidebar would operate something like the Ionic Split Pane - you can see a demo here: https://youtu.be/R9Ov7dsr2Xk?t=69

Keerthana Rajendran [Syncfusion]
Replied On November 25, 2019 03:23 PM UTC

Hi Grant, 
  
Sorry for the inconvenience.  
  
In our Sidebar component, page refresh is required when suddenly mode changes from desktop to mobile. For your scenario, you can achieve this by adding resize event for the window. When window resize triggers, check the condition based on window width and you can change the type for Sidebar component. 
  
Refer the below code block: 
  
window.addEventListener("resize", function() { 
var instance = document.getElementById('default-sidebar').ej2_instances[0]; 
instance.type = (window.matchMedia('(max-width: 600px)').matches) ? "Over" : "Auto" 
}); 
  
 
Please let us know if any concern. 
 
Regards, 
Keerthana. 


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