The ionic sidemenu displays a blank screen when swiped

In my Ionic sidemenu project, the structure is as follows:

1) I choose an item from the menu

2) The screen opens with a list of items

3) Once again, I select an item from the previous list

4) A list of items is displayed

The issue arises when I swipe my finger on the profile picture in the top left corner. While swiping from left to right, a blank screen appears initially. When this blank screen reaches the main page, the menu item does not function properly. This problem is only present on iOS, not Android.

csssassionic-framework

Answer №1

I encountered the same issue you are facing. The empty space is actually caused by the new "Swipe To Go Back" feature in ionic. What you see between your side-menu and current view is not a blank area, but rather the previous view in your history.

To turn off the Swipe To Go Back feature in your app, use the following code:

$ionicConfigProvider.views.swipeBackEnabled(false);

You can include this code in a config file like this:

var app = angular.module('config', ['ionic']);

app.config(function($ionicConfigProvider) {
      $ionicConfigProvider.views.swipeBackEnabled(false);
});

For more information on $ionicConfigProvider, refer to the documentation here: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

If you only want to disable the feature for a specific view, check out the ionView directive in the Ionic documentation (I'm unable to post additional links due to low reputation):

<ion-view can-swipe-back="false">
    ...
<ion-view>

I hope this solution works for you!

Answer №2

Encountering this problem occurs when I include cache:"true" in app.js within the .config function. Once it is removed from the .config function, everything functions correctly. However, if you choose to disable the cache, you can either refer to an alternative solution or eliminate the cache altogether.

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

Laravel's Yajra Datatable is experiencing difficulty with wrapping text on a particular column

I'm currently working on a project that utilizes Yajra Laravel-datatables for managing data tables. Incorporated Yajra package installed through composer.json The issue I'm encountering involves text wrapping, as shown in the screenshot below, ...

csslaravelbootstrap-4datatablesyajra-datatable

Creating an external JavaScript and CSS file for date picker in Eclipse can be done by following a few simple steps. By creating separate files for the

I am using the following javascript and css styles: <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jq ...

javascriptjqueryhtmlcsseclipse

Using Bootstrap and CSS to style a div element and fill it

I'm struggling with a div that splits in two, where I've placed an image on the left side. However, the image doesn't seem to fill the entire space and there are empty spaces on the sides. I'm using bootstrap, but any CSS solution would ...

htmlcssbootstrap-4

Harness the power of JavaScript to generate a dynamic overlay with a see-through image that can be expanded

Within different sections of my website, we display banner ads that are loaded in real-time from third-party sources and come in various sizes. I'm interested in adding a transparent overlay image to each ad which would allow me to trigger a click ev ...

javascriptjquerycss

Why is the media query not affecting this image?

<div class="col-lg-6" > <img src = "iphone6.png" id="dog-mobile" alt="phone"> </div> #dog-mobile{ height:600px; position: absolute; right: 25%; transform: rotate(25deg); } ...

htmlcssbootstrap-4css-selectorsmedia-queries

Is it recommended to directly embed the CSS into the HTML of a specific view?

I have been immersed in a personal project that involves multiple HTML views and CSS files. Up until now, I have been consolidating all the CSS files into one "global.css" and linking this file to my index.html. However, with some friends joining the proje ...

htmlcssimportfrontendcoding-style

Attempting to modify background by manipulating the state in Reactjs

I'm currently working on an app that features various games. My goal is to allow users to click a button and have the game display on the screen, with the background color changing as well. I aim to utilize state to control the overall background of t ...

javascriptcssreactjsbackgroundstyling

What could be the reason for the absence of an option in the navbar

As I work on creating a navbar menu that functions as an accordion on desktop and mobile, I encountered an issue. When I click on the dropdown on mobile, it displays one less item than intended. This seems to be related to a design error where the first it ...

javascripthtmlcssuinavigationbar

Making Mat-Tab Table Headers Sticky in Angular

I'm facing an issue in my application where I have a screen with 3 tabs. One of these tabs contains a table with a large number of rows, and I want to make the headers of this table sticky so that they remain visible when the user scrolls down. Despit ...

javascripthtmlcssangulartypescript

Having trouble with Javascript in getting one-page scroll navigation to work?

Hey there, I am working on creating a one-page scroll navigation with some basic javascript to add a smooth animation effect that takes 1 second as it scrolls to the desired section. However, I seem to be experiencing an issue where it's not functioni ...

javascriptjqueryhtmlcss

What is the best way to pass a CSS root constant to a separate CSS file?

In my Angular test project, I'm experimenting with using the same colors repeatedly. To achieve this, I created a constants.css file where I defined all my root constants, which currently consist of colors. However, I've hit a roadblock when atte ...

cssangular

Display the delete message URL according to the user's name

I have a wall message system using PHP and jQuery where messages from all users are displayed. Now, I want to add delete functionality to each message, but the delete link should only be visible to the user who posted the message. .childs { opaci ...

phpjquerycss

Menu collapse alignment upon hovering

I've spent over an hour grappling with this problem and can't seem to find a solution. Whenever the navigation menu collapses and I hover my mouse over the SHOP item, it shifts the SHOP element to the left. When I move the cursor away, it return ...

htmlcssbootstrap-4

What could be the reason that the Negator pseudo-class fails to function properly in jQuery?

Here is the code snippet I've been working on. It should be self-explanatory. $('body:not(#name)').click(function () { if (document.getElementById('name').value === '') { document.getEl ...

jqueryhtmlcsspseudo-class

Is it possible to use JavaScript to conceal the final custom <div> element on

I have a series of Div elements like this and I want to set an attribute to the last custom div (HRDIV). After that, I need to hide the last hrdiv. <div class="main"> <div id="content"> <div class="cols"> <p>Content n ...

javascripthtmlcss

Is the line-height percentage relative to the viewport or the font size?

Can anyone help me understand the line-height property better? How does it work when set in %? When using: line-height: normal; line-height: 1.6; line-height: 80%; What is the percentage relative to? ...

css

Tips for reusing a JavaScript-generated class across a webpage multiple times

I'm currently working on a script that reads a text file and generates an HTML link using a temporary email address. <script> //<![CDATA[ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.ready ...

javascripthtmlcssfileinclude

Sliding background in a multi-column accordion

I've hit a roadblock with this project. I'm working on setting up a FAQ section that needs to display its items in two columns on desktop, each with a drop shadow effect using Bootstrap 4. I've experimented with Flexbox and CSS columns with ...

htmlcssgridaccordion

Achieving vertical alignment for Bootstrap inputs on mobile devices and horizontal alignment on desktop screens

The code below showcases my current setup: <form> <div class="row"> <div class="col-md-8"> <label class="sr-only" for="first-name">First name</label> <input type="text" class="form-contr ...

htmlcssbootstrap-4

Converting RGB color values to HSL color values using a unique, randomized Javascript approach

On this site, I have added a random color overlay to the media-boxes. Check it out here Thanks to the helpful folks at stackoverflow, I was able to create this script: var getRandomInRange = function(min, max) { return Math.floor(Math.random() * (ma ...

javascriptcssrandomrgbhsl