Sidebar 'Auto' functionality

[Grant EFive]

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]

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]

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]

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.