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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dynamic Bars, Sidebar Menu based on resolutions

Thread ID:

Created:

Updated:

Platform:

Replies:

142844 Feb 21,2019 05:55 PM UTC Feb 22,2019 11:06 AM UTC ASP.NET MVC - EJ 2 1
loading
Tags: Sidebar
Jhon
Asked On February 21, 2019 05:55 PM UTC

Hi,
I need your help to know how can I make similar functions like Outlook showcase, that, bars and sidebar menu change based on resolution. Like this:
Outlook showcase:
Maximized Windows
Resized windows
Resized Windows 2
What library or control did use to do this functionality.

Thanks!

Regards,

Christopher Issac Sunder K [Syncfusion]
Replied On February 22, 2019 11:06 AM UTC

Hi Jhon, 
Thank you for contacting Syncfusion support. 
We have checked your requirement - “To make functionality similar to outlook using sidebar component“. mediaQuery property of Sidebar component specifies whether Sidebar needs to be opened or closed when the specified resolution meets. The showBackDrop property specifies whether or not to apply overlay options to main content when sidebar is in open state and set the type property as “Over” to float the sidebar over the main content. You can use these APIs to achieve your mentioned requirement. Please check below code snippet, 
     //Sidebar created event 
function onCreated() { 
        var defaultSidebarOBJ = document.getElementById('default-sidebar').ej2_instances[0]; 
     //Set mediaQuery property to 900px(When window size is below 900px sidebar automatically closes) 
        defaultSidebarOBJ.mediaQuery = window.matchMedia('(min-width: 900px)'); 
} 
 
window.addEventListener("resize", function () { 
            if (window.innerWidth < 900) { 
                //When resolution is below mediaQuery resolution enable showBackDrop and set type to “Over” 
                defaultSidebarOBJ.showBackdrop = true; 
                defaultSidebarOBJ.type = "Over"; 
                                            . 
                                            . 
                                            . 
            } else { 
                //When resolution is below mediaQuery resolution enable showBackDrop and set type to “Over” 
                defaultSidebarOBJ.showBackdrop = false; 
                defaultSidebarOBJ.type = "Push"; 
                                            . 
                                            . 
                                            . 
            } 
}); 
We have prepared a sample for your reference. 
Sample:  
Please check it and let us know if you have any concerns. 
  
Thanks,
Christo

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

;