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

Subscribe to this post

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,

Reply | Reply with quote

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:

http://www.syncfusion.com/downloads/support/forum/142844/ze/Sidebar636501799

Please check it and let us know if you have any concerns.

Thanks,
Christo

Reply | Reply with quote

Dynamic Bars, Sidebar Menu based on resolutions

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US