When images in Ionic overlap with the side menu bar

Currently, I am in the process of developing an Android app using the IONIC framework. Within this project, I have created three divisions that contain images with shadows applied to them. However, I am encountering an issue where the side menu bar is overlapping these divisions. Despite attempting to adjust the position and z-index properties, the problem still persists. Any assistance or guidance on resolving this matter would be greatly appreciated.

Image 1: Before sliding the side menu:

https://i.sstatic.net/R77r8.png

Image 2: After sliding the side menu:

https://i.sstatic.net/tCJ15.png

Snippet of the 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-->

Snippet of the 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>

javascripthtmlcssangularjsionic-framework

Answer №1

Insert this code snippet into your sidemenu HTML file

<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>

Give it a try, hopefully it works for you just as it did for me (y) :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Striving to enable C code to determine the directory size for optimization with Emscripten compilation

Struggling to compile my C code with emscripten for the first time. Usually, I find solutions on Stack Overflow, but this time is different. I'm trying to show the size of my Django Root directory on a webpage with the following C code: #include <s ...

javascriptcdjangowebassemblyemscripten

What is the method for replicating form fields using Javascript?

Let's say you want an HTML form that is structured like the following: <table> <tr> <td>Field A:</td> <td><input type='text' name='fielda[1]'></td> <td>Field B:</ ...

phpjavascriptjqueryajaxjson

Generate a dynamic dropdown menu in PHP that updates in real-time on the webpage

Seeking assistance in populating a drop-down menu with values from a database on the same page as the input field. I have explored various options on forums without success. Upon hitting submit, the page redirects to a blank page. Even after attempting ...

phpjqueryhtmlajax

Extracting values from a JSON object in JavaScript

Is there a way to retrieve the _id and state values from the provided data? Check out the data { "data": { "totalSamplesTested": "578841", "totalConfirmedCases": 61307, "totalActiveC ...

javascriptarraysjsondestructuring

obtain direct access to the $scope variable when using ng-if

Is there a more effective way to access scope created by ng-if in my directive without using $parent.params.text? <span ng-if="params" uib-tooltip="{{params.text}}"></span> .directive('myDirective', functions(){ return { te ...

angularjsangular-ng-if

Anyone have any (placeholder) fetch URL parameters that require some time to resolve?

Can anyone share any fetch URL parameters that result in a loading time of roughly 5 seconds or longer for the promise to resolve when using fetch(urlArgument);? I'm eager to experiment and learn more. ...

javascript

Utilizing AngularJS and IBM Bluemix to load images

I recently created an application using nodes and angularjs that includes displaying an image in an HTML file. Everything worked perfectly when I tested the application on localhost. Here is the code snippet I used to display the image: <img ng-src=". ...

angularjsnode.jsimageibm-cloud

Tables that respond to changes in screen size, allowing nested table cells to inherit widths

I am currently working on a responsive table with unique content in each row and a concertina feature for expanding rows. When the concertina is activated, it adds another row to the table below the current row, using a td element with a colspan attribute ...

javascriptjquerycsshtml-tableresponsive

Optimizing loading times for mobile banners through media queries

I currently have a standard size banner that loads when my page is accessed on a computer. However, I would like to optimize the loading speed by having a smaller version specifically for mobile devices using a media query. My main question is how does t ...

cssmobilemedia-queriesloadingbanner

What is the CoffeeScript alternative for () => { return test() }?

Currently, I am attempting to write this code in CoffeeScript and finding myself at a standstill... this.helpers({ events: () => { return Events.find({}); } }); ...

javascriptcoffeescript

Utilizing an Asterisk/Wildcard in the Name of a CSS Selector

Have you ever encountered an advanced CSS rule that utilizes an asterisk in the selector name? I am currently working with Bootstrap and have multiple divs nested within a parent div like this: <div class="example"> <div class="col-sm-1"> ...

csstwitter-bootstrapcss-selectors

Utilize AngularJS ngResource to transmit JSON data to the server and receive a response

My Angular JS application requires sending data to the server: "profile":"OLTP", "security":"rsh", "availability":"4", "performance": { "TRANSACTION_PER_SEC":1000, "RESPONSE_TIME":200, "CONCURRENT_CONNECTION_COUNT":500, "STORAGE_SIZE": ...

jsonangularjsngresource

How can I swap out the text within an anchor tag using jQuery?

I am working with the following HTML structure: <div class="event tiny"> <a href="/whatever">Something</a> </div> My goal is to change the text of this link to "Anything" … However, when I try the following code: $('. ...

javascriptjqueryreplace

When a user hovers over an element, display text in a particular div

I've been experimenting with different methods to achieve this, but nothing seems to be working for me. The idea is that when I hover over a specific div like "divOne" or "divTwo", I want a text to appear in the "writeToMe" div. After spending several ...

javascriptjqueryhtml

sticky position is functional in Chrome, however it does not work in Firefox

I am looking to create a vertical div that stretches to the height of its parent container and contains smaller divs. If there is extra space, all divs except for the last one should be positioned at the top, with the last div placed at the bottom. I used ...

csstwitter-bootstrapflexboxbootstrap-4sticky

Utilizing AnimateCSS within a ReactJs component

After installing Animate.CSS with the command npm install animate.css --save, I noticed it was saved in the directory ./node_modules as a locally packaged module. I went through the Animate.CSS documentation on Github, which mentioned that adding class na ...

cssnode.jsreactjsnpm-install

What is causing the 'transitionend' event to trigger multiple times?

Currently, I'm honing my JavaScript skills by taking on the 30 days of JavaScript challenge. I'm puzzled by why the 'transitioned' event is triggered twice in the code snippet below. My CSS only contains one property called transform, ...

javascripthtml

Executing a JS function within a table cell

I've been attempting to invoke a function within a table cell to dynamically create some data, but I keep encountering this error below. I'm uncertain whether I'm correctly calling defined functions and JavaScript functions inside the table ...

javascriptreactjshtml-table

Material-UI React Native components: Injecting Styles without Props

import {createStyles, WithStyles} from "@material-ui/core"; const styles = (theme: Theme) => createStyles({ root: {} }); interface MyProps extends WithStyles<typeof styles> { } export class MyComponent extends Component<MyProps ...

cssreactjstypescriptreact-nativematerial-ui

Retrieve the Typescript data type as a variable

I have the following components: type TestComponentProps = { title: string; } const TestComponent: React.FC<TestComponentProps> = ({ title, }) => { return <div>TestComponent: {title}</div>; }; type TestComponent2Props = { bod ...

javascriptreactjstypescript