Search results

Fixed Sidebar in ASP.NET Core Sidebar control

The following example demonstrates how to render sidebar with fixed position. When scroll the main content area,the position of the sidebar will not change.

tagHelper
fixed_position.cs
<!-- sidebar element declaration -->
<div class="wrapper">
    <ejs-sidebar id="default-sidebar" closeOnDocumentClick="false" width="260px">
        <e-content-template>
            <div class="sidebar-header header-cover" style="background-color:#0378d5">
                <div class="image-container">
                    <div class="sidebar-image">
                    </div>
                </div>
                <div style="padding: 0 0 5px 0;">
                    <a class="sidebar-brand" href="#settings-dropdown">
                        john.doe@gmail.com
                    </a>
                    <span class="sf-icon-down icon"></span>
                </div>
            </div>

            <!-- Sidebar navigation -->
            <ul class="nav sidebar-nav">
                <li>
                    <a href="#">
                        <i class="sf-icon-sidebar sf-icon-file"></i>
                        <span class="e-text"> Inbox</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="sf-icon-sidebar sf-icon-starred"></i>
                        <span class="e-text"> Starred</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="sf-icon-sidebar sf-icon-recent"></i>
                        <span class="e-text">Snoozed</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="sf-icon-sidebar sf-icon-important"></i>
                        <span class="e-text">Important</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="sf-icon-sidebar sf-icon-offline"></i>
                        <span class="e-text"> Sent</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="sf-icon-sidebar sf-icon-backup"></i>
                        <span class="e-text"> Draft</span>
                    </a>
                </li>
            </ul>
        </e-content-template>
    </ejs-sidebar>
    <!-- end of sidebar element -->
    <!--  Main Content declaration -->
    <div>
        <div class="content">
            <div id="left">
                <span id="hamburger" class="e-icons menu default"></span>
            </div>
            <div id="center">
                <span>Inbox</span>
            </div>
            <div id="right">
                <span class="sf-icon-search"></span>
            </div>
        </div>
        <div>
            <div class="e-control e-listview e-list-template e-touch">
                <ul class="e-list-parent e-ul ">
                    <li class="e-list-group-item e-level-1" role="group" data-uid="group-list-item-Today"
                        aria-level="1">
                        <div class="e-text-content" role="presentation"><span class style="width: 100%; margin-left: 2%; margin-top: -2%;">Today</span></div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">Albert Lives</span>
                            </div>
                            <span class="received e-list-content e-second-heading">Opening for Sales Manager</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hello Uta Morgan,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">
                                    Ila Russo
                                </span>
                            </div>
                            <span class="received e-list-content e-second-heading">
                                Business dinner invitation
                            </span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hello Jelani Moreno,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">
                                    Garth Owen
                                </span>
                            </div>
                            <span class="received e-list-content e-second-heading">Application for Job Title</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hello Ila Russo,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">Ursula Patterson</span>
                            </div>
                            <span class="received e-list-content e-second-heading">Hello Kerry Best,</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Programmer Position Application</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">
                                    Nichole Rivas
                                </span>
                            </div>
                            <span class="received e-list-content e-second-heading">Annual Conference</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hi Igor Mccoy,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">
                                    Nichole Rivas
                                </span>
                            </div>
                            <span class="received e-list-content e-second-heading">Annual Conference</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hi Igor Mccoy,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">
                                    Nichole Rivas
                                </span>
                            </div>
                            <span class="received e-list-content e-second-heading">Annual Conference</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hi Igor Mccoy,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">
                                    Nichole Rivas
                                </span>
                            </div>
                            <span class="received e-list-content e-second-heading">Annual Conference</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hi Igor Mccoy,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">
                                    Nichole Rivas
                                </span>
                            </div>
                            <span class="received e-list-content e-second-heading">Annual Conference</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Hi Igor Mccoy,</span>
                            </span>
                        </div>
                    </li>
                    <li class="e-list-item">
                        <div class="e-list-wrapper e-list-avatar e-list-multi-line">
                            <span class="e-avatar e-icon sf-icon-profile"></span>
                            <div>
                                <span class="e-list-item-header e-name">Ursula Patterson</span>
                            </div>
                            <span class="received e-list-content e-second-heading">Hello Kerry Best,</span>
                            <span class="e-list-item-header sf-icon-star">
                                <span class="e-list-text">Programmer Position Application</span>
                            </span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    document.addEventListener('DOMContentLoaded', function () {
        var sidebarTreeview = document.getElementById("default-sidebar").ej2_instances[0];
        // Toggle the Sidebar
        document.getElementById('hamburger').onclick = function () {
            sidebarTreeview.toggle();
        }
    });
    //create instances for sidebar element

</script>
<style>
  .control-section {
    overflow: hidden;
  }

  .e-listview .e-list-parent {
    margin: 0 ;
    padding: 15px 0 15px 0 ;
  }

  .e-listview .e-list-group-item {
    background-color: #ffffff ;
  }

  .e-second-heading {
    color: rgba(0, 0, 0, 0.64) ;
    display: block;
    font-size: 15px ;
    font-weight: 500 ;
  }

  .e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
    top: 1.5666em;
    border-radius: 50%;
    border-color: #4f4b4b ;
    border: 1px solid #BADA55;
  }

  .e-listview {
    overflow: hidden;
  }


  .sf-icon-profile:before {
    float: right;
    content: '\e717';
    font-size: 25px;

  }

  .e-avatar {
    background: none;
    color: #000;
  }

  .e-today {
    height: 50px;
    padding: 15px;
  }

  .e-today span {
    border-color: rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.54);
    font-size: 15px;
    font-weight: 600;
    height: 36px;
  }

  .content {
    height: 47px;
    background: #0378d5;
    width: 100%;
  }

  #left {
    float: left;
    width: 30px;
    height: 47px;
  }

  #center {
    display: inline-block;
    margin: 0 auto;
    width: 0px;
    height: 47px;
    padding: 9px 0 12px 0;
    font-size: 18px;
    color: #ffff;
    float: left;
    text-align: center;
    padding-left: 40px;
  }

  #right {
    float: right;
    width: 28px;
    height: 47px;
    padding: 16px 0 0 0;
    color: #ffff;

  }

  .sf-icon-file:before {
    content: '\e701';

  }

  .sf-icon-share:before {
    content: '\e70b';
  }


  .sf-icon-starred:before {
    content: '\e708';
  }

  .sf-icon-star:before {
    content: '\e707';
    font-size: 15px;
    color: #000;
    float: right;

  }

  .sf-icon-recent:before {
    content: '\e70c';
  }

  .sf-icon-important:before {
    content: '\e713';
  }

  .e-sidebar.e-left {
    border: none;
    left: inherit;
  }

  .sf-icon-offline:before {
    content: '\e714';
    font-size: 30px;
  }

  .sf-icon-backup:before {
    content: '\e712';

  }

  .sf-icon-down:before {
    content: '\e709';

  }

  .sf-icon-search:before {
    content: '\e711';
    font-size: 18px;

  }

  .sf-icon-sidebar {
    content: '\e701';
    color: #000000;
    display: inline-block;
    margin-right: 16px;
    width: 40px;
    text-align: left;
    font-size: 20px ;
    vertical-align: middle;
  }

  ul.nav.sidebar-nav {
    padding: 5px 0 5px 0;
    margin: 0px;
    max-height:477px;
    overflow-y: auto;
  }

  .sidebar-nav {
    list-style: none;
    padding: 5px 0 5px 0;
  }

  a.sidebar-brand {
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
  }

  .nav.sidebar-nav li:hover {
    text-decoration: none;
    background-color: #eee;
  }

  span.sf-icon-down.icon {
    font-size: 12px;
  }

  .sidebar-nav li a {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: block;
    height: 48px;
    line-height: 48px;
    width:241px;
    padding: 0 56px 0 20px;
    text-decoration: none;
    font-weight: 500;
    overflow: hidden;
    font-size: 14px;

  }

  /* sample-level styles */
  .image-container {
    padding: 18px 0 0 16px;
  }

  .sidebar-image {
    background: url(https://ej2.syncfusion.com/showcase/angular/expensetracker/assets/images/user.svg) no-repeat scroll 0 0 transparent;
    background-position-x: left;
    height: 85px;
    width: 100%;
    background-size: 85px;
    /* margin-left: 20px; */
  }

  .sidebar-brand {
    height: 48px;
    line-height: 48px;
    padding-left: 20px;
    padding-right: 40px;
    text-decoration: none;
    font-weight: 500;
    overflow: hidden;
    display: inline-flex;
  }

  .sidebar-image img {
    width: 54px;
    height: 54px;
    margin: 16px;
    border-radius: 50%;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

    #default-sidebar {
        color: #ffffff;
        position: fixed;
        overflow: hidden;
        height: 477px;
        border-right: 0.5px solid #80808070;
        border-bottom: 0.5px solid #80808070;
    }

  /* sample-level styles */

  #hamburger.menu {
    font-size: 23px;
    cursor: pointer;
    float: left;
    line-height: 50px;
    position: absolute;
    z-index: 1000;
    margin-left: 25px;
    color: #ffff;
  }

  #hamburger.menu:before {
    content: '\e10d';
  }

  #hamburger.menu.e-rtl {
    position: relative;
    float: right;
  }

  @@font-face {
  font-family: 'e-icons';
  src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
  font-weight: normal;
  font-style: normal;
  }

  @@font-face {
    font-family: 'e-sb-icons';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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AAATMzUjBSElByclMzUjNTM1IwUXEQE3JwUBIQLIyAESAs/+/mVm/ezIyMjIAvfx/Sry8gFoAWf9MQGBIXycUVEsIUwhnZMBU/6tk8D3AR8ABAAAAAADzgPqAA8AIAAvADsAACUjJzcjFwcjAwYCFyEuAQcBHgEXPgE3LgEnNDY1JiMOASUzMhYdARQGKwEVLwE3FQceARc+ATcuAScOAQJeJjsvZDI2Lj+tjgMDryP1EP5EA5Rvb5MFY38CAxMTb5QCA3QKDAwKdzs4d5ACWUFDWAECWUFDWCuHV1SKARAm/v4Rv4sEASJxkwICkm8FgmAJEAcDA5OiDAooCgwpLChMIy9DVwICWUFDWAICWAAAAgAAAAAD3QPqAA0AGQAANxUhNS4BJw4BIiYnDgETHgEXPgE3LgEnDgEQA84DknEvc39zL3GS1AOac3SaAwOadHOahIKCdaMRJCgoJBGjAeF0mgMDmnR0mgICmgAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAAoAAQABAAAAAAACAAcACwABAAAAAAADAAoAEgABAAAAAAAEAAoAHAABAAAAAAAFAAsAJgABAAAAAAAGAAoAMQABAAAAAAAKACwAOwABAAAAAAALABIAZwADAAEECQAAAAIAeQADAAEECQABABQAewADAAEECQACAA4AjwADAAEECQADABQAnQADAAEECQAEABQAsQADAAEECQAFABYAxQADAAEECQAGABQA2wADAAEECQAKAFgA7wADAAEECQALACQBRyBlLXNiLWljb25zUmVndWxhcmUtc2ItaWNvbnNlLXNiLWljb25zVmVyc2lvbiAxLjBlLXNiLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABlAC0AcwBiAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZQAtAHMAYgAtAGkAYwBvAG4AcwBlAC0AcwBiAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABlAC0AcwBiAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPARABEQESARMBFAEVARYBFwEYARkBGgEbAAltYWlsLXNlbmQLaW5ib3gtMDItd2YLaW5ib3gtMDEtd2YFaW5ib3gPb3Blbi1tZXNzYWdlLXdmDGFycm93aGVhZC0wMRBhcnJvd2hlYWQtdG9wLXdmCXJhdGluZy13ZgtyYXRpbmctLS0wMxFhcnJvd2hlYWQtZG93bi0wMQlmb2xkZXItMDMIdXNlcnMtd2YIY2xvY2stMDIGdXBsb2FkCG9uZWRyaXZlEWNsb3VkLWRvd25sb2FkLXdmD3dvcmstb2ZmbGluZS13ZglzZWFyY2gtd2YPbm90ZS1tZW1vLTAxLXdmDGltcG9ydGFudC13ZglzZW50LW1haWwIaW5ib3gtd2YLbWFpbC0tLXNlbnQJdXNlci1iYWNrDHVzZXItcHJvZmlsZQAAAAA=) format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  [class^="sf-icon-"],
  [class*=" sf-icon-"] {
    font-family: 'e-sb-icons' ;
    speak: none;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  span.e-text {
    color: #000000;
  }

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

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

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

  [class^="sf-icon-"],
  [class*=" sf-icon-"] {
    font-family: 'e-sb-icons' ;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }



  /* end of newTab support */
    .e-content-animation li.e-list-item {
        border-bottom: 0.5px solid #80808070 ;
        cursor: pointer;
    }

    .wrapper .e-content-animation {
        border-bottom: 0.5px solid #80808070;
        height: 477px;
        overflow:auto;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

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

Output be like the below.

Sidebar Sample