Search results

Auto-close

The Sidebar often behaves differently on mobile display and differently on desktop display. It has an effective feature that offers to set it in opened or closed state depending on the specified resolution. This is achieved through mediaQuery property that allows you to set the Sidebar in an expanded state or collapsed state only in user-defined resolution.

In the following sample, mediaQuery has been used to close and open the Sidebar based on a specific resolution.

Source
Preview
index.js
index.html
styles.css
ej.base.enableRipple(true);
   //Sidebar initialization
   var defaultSidebar = new ej.navigations.Sidebar({
        width:'280px',
        mediaQuery: window.matchMedia('(min-width: 600px)')
    });
    defaultSidebar.appendTo('#default');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!-- Sidebar element declaration -->
        <aside id="default">
            <div class="title"> Sidebar </div>
        </aside>
        <!-- end of sidebar element -->
        <!-- main content declaration -->
        <div>
            <div class="title">Main content</div>
            <div class="sub-title">* Sidebar will collapse in mobile mode automatically</div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}
.header {
 	width:100%;
	height: 40px;
	font-size:20px;
	line-height: 40px;
	font-weight: 500;
	background: #eee;
	display: inline-block;
}
.center-align {
	text-align: center;
	padding: 20px;
}

.title {
	text-align: center;
	font-size: 20px;
	padding: 15px;
}

.sub-title {
	text-align: center;
	font-size: 14px;
	padding: 10px;
}

.center {
	text-align: center;
	display: none;
	font-size: 13px;
	font-weight: 400;
	margin-top: 20px;
}

#wrapper {
	display: block;
}

.sb-content-tab .center {
	display: block;
}

.sb-content-tab #wrapper {
	display: none;
}

.right {
	float: right;
}

body {
	margin: 0;
}

#default {
	background-color: rgb(25, 118, 210);
	color: #ffffff;
}

.close-btn:hover {
	color: #fafafa;
}

.content-section { /* csslint allow: adjoining-classes */
	padding: 30px 10px 10px 20px;
}
.book .ej2-sample-frame { /* csslint allow: adjoining-classes */
	padding: 0;
}
  • In the following sample,the Sidebar will be in an expanded state only in resolution below 400px.
Source
Preview
index.js
index.html
styles.css
ej.base.enableRipple(true);
   //sidebar initialization
   var defaultSidebar = new ej.navigations.Sidebar({
        mediaQuery: window.matchMedia('(max-width: 400px)'), 
        width: "280px"
   });
    defaultSidebar.appendTo('#default');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!-- sidebar element -->
        <aside id="default">
            <div class="title"> Sidebar </div>
        </aside>
        <!-- end of sidebar element -->
        <!-- main content declaration -->
        <div>
            <div class="title">Main content</div>
            <div class="sub-title"> * Sidebar will open in mobile mode automatically</div>
        </div>
        <!-- end of main content -->
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}
.header {
 	width:100%;
	height: 40px;
	font-size:20px;
	line-height: 40px;
	font-weight: 500;
	background: #eee;
	display: inline-block;
}
.center-align {
	text-align: center;
	padding: 20px;
}

.title {
	text-align: center;
	font-size: 20px;
	padding: 15px;
}

.sub-title {
	text-align: center;
	font-size: 14px;
	padding: 10px;
}

.center {
	text-align: center;
	display: none;
	font-size: 13px;
	font-weight: 400;
	margin-top: 20px;
}

#wrapper {
	display: block;
}

.right {
	float: right;
}

body {
	margin: 0;
}

#default {
	background-color: rgb(25, 118, 210);
	color: #ffffff;
}

.close-btn:hover {
	color: #fafafa;
}

.content-section { /* csslint allow: adjoining-classes */
	padding: 30px 10px 10px 20px;
}
.book .ej2-sample-frame { /* csslint allow: adjoining-classes */
	padding: 0;
}