Customize Position

5 Sep 20174 minutes to read

Position property is used to specify the position whether it is in fixed or relative to the page. When you set a normal value to position property, it appears within the container. Otherwise, it appears in the whole body .The possible position values are fixed and normal. The Default value is normal.

  • HTML
  • <div class="cols-sample-area" style="padding: 0px; position:relative;  margin: 0px; min-height: 451px; width: 100%;">
             <div id="butdrawer" class="drawericon e-icon"></div>
                  <ej:NavigationDrawer runat="server"  ID="navpane" Position="Fixed" Type="Slide" EnableListView="true" TargetId="butdrawer" >
                          <ListViewSettings Width="300" SelectedItemIndex="0" />
                                <ej:NavigationDrawerItems  Text="Home"  />
                                <ej:NavigationDrawerItems  Text="Profile" />
                                <ej:NavigationDrawerItems  Text="Photos" />
                                <ej:NavigationDrawerItems  Text="Location" />

    Add following code in style section,

  • CSS
  • <style type="text/css">
           .e-header {
                padding-top: 8px;
            #container p {
                padding: 10px;
                text-align: justify;
            #container {
               -moz-user-select: none;
               -webkit-user-select: none;
               -ms-user-select: none;
               user-select: none;
               position: relative;
               overflow: hidden;
               min-height: 451px;
                .e-drawericon {
                background-position: center center;
                background-repeat: no-repeat;
                height: 32px;
                width: 32px;
                background-size: 100% 100%;
                padding-right: 10px;
    			content: "\e76b";
                font-size: 28px;

    The following screenshot illustrates the output by swiping from left to right at the left end of the screen.