title: how to fix this overlapping issue of select-box options and toggle-buttons
body: <h2>company.html</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="main"&gt;
   &lt;h1&gt;Company Management&lt;/h1&gt;
   &lt;md-card&gt;
     &lt;button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()"&gt;
      &lt;md-icon style="color:white;"&gt;add&lt;/md-icon&gt;
     &lt;/button&gt;
        &lt;div class="table-responsive"&gt;
       &lt;table class="table adminTable"&gt;
         &lt;thead&gt;
           &lt;th&gt;Name&lt;/th&gt;
           &lt;th&gt;Email&lt;/th&gt;
           &lt;th&gt;country&lt;/th&gt;
           &lt;th&gt;Action&lt;/th&gt;
         &lt;/thead&gt;
         &lt;tbody&gt;
           &lt;tr *ngFor="let company of companies"&gt;
             &lt;td&gt;{{company.user_name}}&lt;/td&gt;
             &lt;td&gt;{{company.email}}&lt;/td&gt;
             &lt;td&gt;{{company.country}}&lt;/td&gt;
             &lt;td&gt;
                 &lt;button class="btn" md-raised-button&gt;Guide&lt;/button&gt;
                 &lt;button class="btn" md-raised-button&gt;Pin&lt;/button&gt;
                 &lt;button class="iconBtn first"&gt;
                  &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
                 &lt;/button&gt;
                 &lt;button class="iconBtn second"&gt;
                   &lt;i class="fa fa-trash-o" aria-hidden="true"&gt;&lt;/i&gt;
                 &lt;/button&gt;
             &lt;/td&gt;
           &lt;/tr&gt;
         &lt;/tbody&gt;
       &lt;/table&gt;
     &lt;/div&gt;
   &lt;/md-card&gt;
  &lt;/section&gt;
  &lt;div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-md"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;Add Company&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body row"&gt;
          &lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
              &lt;md-input-container class="mat-input-container ng-pristine ng-valid ng-touched"&gt;
                  &lt;input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" placeholder="E-mail" [(ngModel)]="email" required&gt;
                  &lt;div class="mat-input-underline"&gt;&lt;span class="mat-input-ripple"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/md-input-container&gt;
              &lt;md-input-container class="mat-input-container ng-pristine ng-valid ng-touched"&gt;
                  &lt;input type="password" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="password" placeholder="Password" [(ngModel)]="password" required&gt;
                  &lt;div class="mat-input-underline"&gt;&lt;span class="mat-input-ripple"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/md-input-container&gt;
              &lt;div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"&gt;
                  &lt;mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched"&gt; Active &lt;/mat-slide-toggle&gt;
              &lt;/div&gt;
              &lt;md-input-container class="mat-input-container ng-pristine ng-valid ng-touched"&gt;
                  &lt;input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="username" placeholder="User name" [(ngModel)]="username" required&gt;
                  &lt;div class="mat-input-underline"&gt;&lt;span class="mat-input-ripple"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/md-input-container&gt;
              &lt;md-input-container class="mat-input-container ng-pristine ng-valid ng-touched"&gt;
                  &lt;input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="country" placeholder="Country" [(ngModel)]="country" required&gt;
                  &lt;div class="mat-input-underline"&gt;&lt;span class="mat-input-ripple"&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/md-input-container&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="mat-input-container ng-pristine ng-valid ng-touched"&gt; Membership* &lt;/label&gt;
                  &lt;ng-select [options]="status" name="option" [(ngModel)]="option" class="filterDropDown"&gt;&lt;/ng-select&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"&gt;
                  &lt;mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched"&gt;Is notification on&lt;/mat-slide-toggle&gt;
                  &lt;mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched"&gt;Is GPS on&lt;/mat-slide-toggle&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer cat-btn"&gt;
             &lt;button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()"&gt;Cancel&lt;/button&gt;
             &lt;button md-raised-button class="md-raised save color-white"&gt;Save&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>styles.css</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    margin: 0px !important;
  }
  
  ul li {
    list-style-type: none;
  }
  
  .loginMainDiv {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #55595c;
    top: 0px;
    z-index: 9999999999999;
  }
  
  .btn-info.disabled,
  .btn-info:disabled {
    background-color: #17a2b8;
    border-color: #17a2b8;
    cursor: no-drop;
  }
  
  .loginpageForm {
    margin: 100px auto auto auto;
    width: 370px;
    height: auto;
    background-color: white;
    padding: 60px 15px 70px 15px;
  }
  
  .loginpageForm h2 {
    font-family: 'Roboto', sans-serif;
    color: #b7b7b7;
    text-align: center;
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 45px;
  }
  
  .loginpageForm .form-group {
    margin-bottom: 25px;
  }
  
  .loginbtn {
    margin-top: 35px;
  }
  
  .loginbtn button {
    cursor: pointer;
    width: 92%;
    margin: auto;
    margin-left: 4%;
    font-family: Tahoma;
    font-size: 18px;
    transition: all 0.4s linear;
    height: 45px;
    margin-top: 0px;
    margin-bottom: 15px;
  }
  
  .loginbtn button:hover {
    background-color: floralwhite;
    color: #00b8e6;
    transition: all 0.4s linear;
    transform: translateY(-0.20em);
  }
  
  p.forgetpwd {
    font-size: 16px;
    margin: auto;
    text-align: right;
    font-family: Arial;
    letter-spacing: 0.7px;
    margin-right: 16px;
    color: #b7b7b7;
  }
  
  .loginpageForm input {
    color: #b7b7b7;
  }
  
  .forgetpwd a {
    cursor: pointer;
    color: #0275d8 !important;
  }
  
  .forgetpwd a:hover {
    color: #014c8c !important;
    text-decoration: underline !important;
  }
  
  .error {
    padding-left: 8px !important;
    margin-top: -20px;
    margin-bottom: 10px;
    color: red;
  }
  
  button.navbar-toggle {
    border: 0px;
    background: none;
    cursor: pointer;
    outline: none !important;
    padding: 0px;
  }
  
  header {
    background-color: #55595c;
    padding: 20px 15px;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 99999;
  }
  
  .admin {
    text-align: right;
  }
  
  .admin span {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    letter-spacing: 0.8px;
    position: fixed;
    top: 0px;
    padding-top: 20px;
    right: 20px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    cursor: pointer;
  }
  
  .admin span:hover {
    color: #55595c;
    background-color: white;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
  }
  
  .admin span img {
    margin-left: 15px;
  }
  
  header img {
    border-radius: 100%;
    width: 50px;
    min-height: 50px;
  }
  
  .col-xs-6 {
    max-width: 50%;
  }
  
  .logoutDiv {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    letter-spacing: 0.8px;
    position: fixed;
    margin-top: 10px;
    padding-top: 25px;
    right: 20px;
    padding-bottom: 15px;
    padding-left: 43px;
    padding-right: 35px;
    display: none;
    background-color: white;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
  }
  
  .logoutDiv i {
    margin-right: 20px;
    color: #7e8890;
    font-size: 18px;
  }
  
  .logoutDiv h4:hover {
    color: #64bbfb;
  }
  
  .logoutDiv h4:hover i {
    color: #64bbfb;
  }
  
  .admin span:hover .logoutDiv {
    display: block;
    color: #55595c;
  }
  
  .navigation {
    width: 100%;
    background-color: #676a6d;
    height: 75px;
    margin-top: -16px;
    padding: 0 7.4%;
    margin-top: 90px;
    0 3px 1px -2px rgba(0, 0, 0, .2),
    0 2px 2px 0 rgba(0, 0, 0, .14),
    0 1px 5px 0 rgba(0, 0, 0, .12)
  }
  
  .navigation ul {
    padding: 0px;
  }
  
  .navigation ul li {
    float: left;
    height: 75px;
    display: block;
    padding: 22px 35px;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    color: white;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease-in;
    outline: none !important
  }
  
  li.activeTab {
    background-color: rgb(248, 248, 248);
    color: #4d87c5 !important;
    cursor: context-menu !important;
  }
  
  .navigation ul li:hover {
    background-color: rgb(248, 248, 248);
    color: #4d87c5;
  }
  
  footer {
    bottom: 0px;
    width: 100%;
    background-color: #55595c;
    padding: 30px 0;
  }
  
  .no-padding {
    padding: 0 !important;
  }
  
  .padingClass {
    padding: 0 7.4%;
  }
  
  footer p,
  footer p a {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #ecf0f1;
    font-size: 18px;
    text-decoration: none;
    margin: 6px 0 0;
    transition: all 0.3s linear;
  }
  
  footer p a:hover,
  footer p a:active,
  footer p a:focus {
    color: darkgray
  }
  
  .back-fa {
    background: #fff;
    border-radius: 30px;
  }
  
  .social-bar li {
    float: left;
    margin: 5px 10px;
  }
  
  .social-bar li a {
    color: #434343;
    -webkit-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
  }
  
  .social-bar li a:hover {
    color: #4d88c6;
  }
  
  .main h1 {
    margin-top: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    color: #55595c;
    margin-bottom: 40px;
  }
  
  section.main {
    padding: 30px 7.4%;
  }
  
  .add-task {
    position: absolute !important;
    float: right;
    right: 2%;
    top: -22px;
    overflow: hidden;
    background-color: #58B6A2 !important;
    outline: none !important;
    width: 50px !important;
    height: 50px !important;
  }
  
  .add-task md-icon {
    font-size: 28px;
    line-height: 33px !important;
    height: 32px;
    width: 32px;
  }
  
  .add-task:hover {
    background-color: #367c6d !important;
  }
  
  md-card {
    padding: 50px 0px !important;
    background: white;
  }
  
  .md-content {
    padding-bottom: 0px;
    font-family: 'roboto', sans-serif;
    color: #727272;
    text-align: center;
    white-space: nowrap;
  }
  
  .title {
    text-align: center;
  }
  
  .title span {
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    color: #727272;
    letter-spacing: 0.5px;
  }
  
  .content span {
    color: #727272;
    cursor: pointer;
    font-size: 16px;
  }
  
  .content span:hover {
    color: #333;
  }
  
  .iconBtn {
    background: none;
    border: 0px;
    padding: 0px;
    outline: none !important;
    margin-right: 10px;
  }
  
  .iconBtn i {
    color: #727272;
    cursor: pointer;
    font-size: 18px;
  }
  
  .iconBtn i:hover {
    color: #333;
  }
  
  .cat-img {
    width: 75px;
    height: 60px;
  }
  
  .adminTable th {
    border-top: 0px !important;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: #727272;
  }
  
  .adminTable td {
    text-align: center;
    font-family: 'Roboto', sans-serif;
    color: #727272;
  }
  
  .box {
    margin-bottom: 25px;
    width: 200px;
    height: 40px;
    color: #727272;
    padding: 5px;
    cursor: pointer;
    outline: none !important
  }
  
  .page {
    float: right;
    margin-right: 5%;
    cursor: pointer;
    font-size: 22px;
  }
  
  .page .current {
    cursor: pointer !important;
    background: #58B6A2 !important;
  }
  
  .page a:hover,
  .page button:hover {
    background: none !important;
    text-decoration: none !important;
  }
  
  .page .disabled {
    cursor: no-drop !important;
  }
  
  .page a::after,
  .page .disabled::after,
  .page a::before,
  .page .disabled::before {
    content: none !important;
  }
  
  li.pagination-next,
  li.pagination-previous {
    font-size: 43px;
    position: relative;
    top: 7px;
  }
  
  td .btn {
   color: white;
   margin-right: 5px;
   margin-bottom: 10px;
   background-color: #58B6A2 ;
  }
  
  td .btn:hover {
   background-color: #367c6d ;
  }
  
  .modal {
    z-index: 999999999 !important;
    top: 30px !important;
    box-shadow: 1px 2px 5px #000000;
  }
  
  .modal.fade.in {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
  }
  
  .modal-content {
   border-radius: 6px !important;
   margin: 180px auto auto auto !important;
  }
  
  .modal-header {
   background-color: #58B6A2 ;
   color: white;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
  }
  
  .modal-title {
   margin:auto;
  }
  
  .modal-body {
   padding: 30px 40px 15px 40px !important;
  } 
  
  .form-group {
    margin-top: 15px;
  }
  
  .filterDropDown {
    margin-bottom: 20px;
  }
  
  .mat-input-container {
    width: 100%; 
    color:  #727272 !important;
  }
  
  .mat-input-underline .mat-input-ripple.mat-focused {
      background-color: #58B6A2 !important;
  }
  
  .mat-input-placeholder:not(.mat-empty),
  .mat-input-placeholder.mat-focused {
      color: #58B6A2 !important;
      font-weight: 700 !important;
      padding-left: 8px;
  }
  
  .toggleClass md-slide-toggle {
      float: right;
      margin: auto 40px auto auto;
  }
  
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
      background-color: #58B6A2 !important;
      opacity: 0.4;
      cursor:pointer;
  }
  
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
      background-color: #58B6A2 !important;
  }
  
  .mat-slide-toggle-thumb {
      cursor: pointer;
      background-color: white;
      overflow: hidden;
  }
  
  .mat-slide-toggle-bar {
      background-color: gray;
  }
  
  .mat-slide-toggle-container {
      cursor: pointer !important;
      overflow: hidden;
  }
  
  .mat-slide-toggle-input {
    margin-left: -15px; 
  }
  
  .cat-btn .cancel {
    color: white;
    background-color: #FF5252;
    outline: none !important;
  }
  
  .cat-btn .save {
    color: white;
    outline: none !important;
    cursor: no-drop;
  }
  
  .cat-btn .cancel:hover , .cat-btn .save:hover {
    box-shadow: 5px 5px 5px grey;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <h2>company.component.ts</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { Router } from '@angular/router';
  
  @Component({
    templateUrl: './company.html'
  })
  export class CompanyComponent {
   companies = [{"user_name":"company1","email":"test@test.com","country":"India"},
   {"user_name":"company2","email":"test1@test.com","country":"India"},
   {"user_name":"company3","email":"test2@test.com","country":"India"},
   {"user_name":"company4","email":"test3@test.com","country":"India"},
   {"user_name":"company5","email":"test4@test.com","country":"India"},
   ];
   status = [{ label: 'Free' }, { label: 'Premium'}];
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>how to fix this overlapping issue of select-box options and toggle-buttons</p>
  
  <p>here,
  in the output when i click-on select-box(membership) its also displaying the toggle buttons over the options of the select-box </p>
  
  <p>in simple they(select-box options and toggle buttons) are overlapping </p>
  
  <p>help me in fixing this problem</p>