Images overlapping with side menu bar in Ionic

Question

I'm building an android app based on IONIC framework. I have made 3 divisions with images and shadows in each of them . But the side menu bar is ovelapping with them. I tried setting position:relative; and z-index but it didn't work out. Kindly help me with this one.

Image 1. Before sliding side menu:

Image 2. After sliding side menu:

Side menu code :

<!--SIDE MENU BAR STARTS -->

 <ion-side-menu side="left">
     <ion-content>
        <ion-list>
          <ion-item class="item-avatar-left"> <img  src="/img/6.jpg">
              <h1  id="menu-left-header-id">Hi REX !</h1>
              <span class="badge badge-positive">18</span>
          </ion-item>


<progress max="100" value="50"> </progress>

         <a class="item item-icon-left" href="#/app/home">
         <i class="icon ion-android-notifications-none" ></i>
            Notifications
         </a>

         <a class="item item-icon-left" href="#/app/tutorials">
         <i class="icon ion-monitor"></i>
              Tutorials
         </a>

        <a class="item item-icon-left" href="#/app/practice/">
        <i class="icon ion-ios-game-controller-b" ></i>
              Practice
        </a>

        <a class="item item-icon-left" href="#/app/playlists/">
        <i class="icon ion-android-create" ></i>
              Tests
        </a>


        <a class="item item-icon-left" href="#/app/settings/">
        <i class="icon ion-gear-a" href="#/app/settings" ></i>
              Settings
        </a>

        <a class="item item-icon-left" href="#/app/playlist">
        <i class="icon ion-android-document" ></i>
             Documents
        </a>

        <a class="item item-icon-left" href="#/app/playlist">
        <i class="icon ion-code" ></i>
              About
        </a>


      </ion-list>
    </ion-content>
   </ion-side-menu>
  </ion-side-menus>
<!-- SIDE MENU BAR ENDS-->

Cards' code:

.container{
	padding-top: 20px;
	padding-left:20px;
	padding-right:20px;

}
.card-pic{
  margin: 20px 20px 0px 20px;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

}

img{
   max-width: 100%;
   height: auto;
	 
}

<div class="container">
    <div class="card-pic item item-image">
      <img class="card-img" src="img/phy.png">
     </div></br>
    <div class="card-pic item item-image">
      <img class="card-img" src="img/maths.jpg">
    </div></br>
    <div class="card-pic item item-image">
     <img class="card-img" src="img/chem.jpg">
    </div>
</div>

Ujjwal kaushik Ujjwal kaushik · Accepted Answer · 2016-10-02T15:47:28

Use this in your sidemenu html

<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
  <ion-nav-bar class="bar-stable">
     <ion-nav-back-button>
     </ion-nav-back-button>
     <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
     </ion-nav-buttons>
  </ion-nav-bar>
  <ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
  <ion-header-bar class="bar-stable">
     <h1 class="title">Left</h1>
  </ion-header-bar>
  <ion-content>
     <ion-list>
        <ion-item class="item-avatar-left">
           <img  src="img/img.jpg">
           <h1  id="menu-left-header-id">Hi REX !</h1>
           <span class="badge badge-positive">18</span>
        </ion-item>
        <progress max="100" value="50"> </progress>
        <a class="item item-icon-left" href="#/app/home">
        <i class="icon ion-android-notifications-none" ></i>
        Notifications
        </a>
        <a class="item item-icon-left" href="#/app/tutorials">
        <i class="icon ion-monitor"></i>
        Tutorials
        </a>
        <a class="item item-icon-left" href="#/app/practice/">
        <i class="icon ion-ios-game-controller-b" ></i>
        Practice
        </a>
        <a class="item item-icon-left" href="#/app/playlists/">
        <i class="icon ion-android-create" ></i>
        Tests
        </a>
        <a class="item item-icon-left" href="#/app/settings/">
        <i class="icon ion-gear-a" href="#/app/settings" ></i>
        Settings
        </a>
        <a class="item item-icon-left" href="#/app/playlist">
        <i class="icon ion-android-document" ></i>
        Documents
        </a>
        <a class="item item-icon-left" href="#/app/playlist">
        <i class="icon ion-code" ></i>
        About
        </a>
     </ion-list>
  </ion-content>

Hope it will work for you , Its working for me (y) :)

Images overlapping with side menu bar in Ionic

1 Answers