Search results

Fixed Sidebar in JavaScript 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.

Source
Preview
app.ts
index.html
styles.css
import { Sidebar} from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

// Sidebar Initialization
let defaultSidebar: Sidebar = new Sidebar({
    width:'260px',
   created: onCreate
  });
  defaultSidebar.appendTo('#default-sidebar');
  //end of Sidebar initialization  

document.getElementById('hamburger').onclick = (): void => {
  defaultSidebar.toggle();
}
function onCreate(): void {
    this.element.style.visibility = '';
}
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body> 
    <div id='loader'>LOADING....</div>
    <div id='container'>
         <!-- declaration of sidebar element -->
         <div id="wrapper">
            <!-- sidebar element declaration -->
            <aside id="default-sidebar" style="visibility: hidden">
                <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>
            </aside>
            <!-- 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>
            <!--end of main content declaration -->
        </div>    
    </div> 
</body>

</html>
.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: initial;
  }
  
  
  .sf-icon-profile:before {
    float: right;
    content: '\e717';
    font-size: 25px;
    padding-top:8px;
    padding-right:7px;
  }
  
  .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;
  }
  
  .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:200px;
    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;
  }
  
  /* 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;
  }
  
  [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 */
  li.e-list-item {
    border-bottom: 0.5px solid #80808070 !important;
    cursor: pointer;
  }

  .e-content-animation{
    border-bottom: 0.5px solid #80808070;
    height: 477px;
  }