Search results

Auto-close

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

razor
autoclose.cs
@{Html.EJS().Sidebar("default-sidebar").Width("280px").Created("onCreated").ContentTemplate(@<div>
        <div class="title-header">
            <div style="display:inline-block"> Sidebar </div>
        </div>
    </div>).Render();}
<div>
    <div class="title default">Main content</div>
    <div class="sub-title">
        Place your primary content here.
    </div>
</div>
<script type="text/javascript">
    function onCreated() {
        var obj = document.getElementById("default-sidebar").ej2_instances[0];
        obj.mediaQuery = window.matchMedia('(min-width: 600px)');
    }
</script>

<style>
    .center-align {
        text-align: center;
        padding: 20px;
    }

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

    .column {
        display: inline-block;
        padding: 10px;
    }

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

    body {
        padding-top: 0px;
        padding-bottom: 0px;
    }

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

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

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

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

        #default-sidebar .close-btn:hover {
            color: rgba(0, 0, 0, .87);
            background-color: #fafafa;
        }

    .e-sidebar .title-header #close {
        color: #fafafa;
        cursor: pointer;
        line-height: 25px;
    }

    .e-sidebar.e-left .title-header #close {
        float: right;
    }

    .e-sidebar.e-right .title-header #close {
        float: left;
    }

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

    .title.default {
        padding: 25px 15px 15px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult autoclose()
        {
            return View();
        }
    }
}
  • In this sample,the Sidebar will be in an expanded state only in resolution below 400px.
razor
autoclose.cs
@{Html.EJS().Sidebar("default-sidebar").Width("280px").Created("onCreated").ContentTemplate(@<div>
        <div class="title-header">
            <div style="display:inline-block"> Sidebar </div>
        </div>
    </div>).Render();}
<div>
    <div class="title default">Main content</div>
    <div class="sub-title">
        Place your primary content here.
    </div>
</div>
<script type="text/javascript">
    function onCreated() {
        var obj = document.getElementById("default-sidebar").ej2_instances[0];
        obj.mediaQuery = window.matchMedia('(max-width: 400px)');
    }
</script>

<style>
    .center-align {
        text-align: center;
        padding: 20px;
    }

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

    .column {
        display: inline-block;
        padding: 10px;
    }

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

    body {
        padding-top: 0px;
        padding-bottom: 0px;
    }

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

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

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

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

        #default-sidebar .close-btn:hover {
            color: rgba(0, 0, 0, .87);
            background-color: #fafafa;
        }

    .e-sidebar .title-header #close {
        color: #fafafa;
        cursor: pointer;
        line-height: 25px;
    }

    .e-sidebar.e-left .title-header #close {
        float: right;
    }

    .e-sidebar.e-right .title-header #close {
        float: left;
    }

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

    .title.default {
        padding: 25px 15px 15px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class SidebarController : Controller
    {
        public IActionResult autoclose()
        {
            return View();
        }
    }
}