List disapearing, pointer-event

Ionic Framework ionic-v3
1

Hi, i have a problem with ion-lists:
When i use ion-list with dynamic items, data-binded, editables, etc …, if i open my left menu, some items disapear.
If i open chrome debugger and change any css property , all elements disapeared come back.
If i disable the pointer-event:none css property on ion-content when my left menu is open, all seem working fine, but if i disable this property , i can click in my ion-content when my left menu is open.

I dont know my list element disapear, i didn’t see any css property hidding them. Someone could know what can do that? Someone have ever seem that?

Thanks

2

This only happens in the browser for me, so if your app is only meant to be used on mobile devices (as an actual app) it shouldn’t be a problem. Can you confirm whether it happens on a phone as well or just the browser? :slight_smile:

3

if i run “ionic serve -lab” i haven’t it yes… but after a “ionic run --prod” i get this problem on device :confused:

4

i get this only in “md” mode

5

Can you share some code of what you have?
It’s hard to know what the issue is without having all the pieces

6

I made a starter project with an input list.
After setting some input and open/close menu i got this , my items disapear.

image
error1.JPG373×620 15.5 KB

image
error2.JPG382×651 6.93 KB

My project test

page1.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
  </p>
  <ion-list *ngFor="let data of tabForm; let i = index">
    <ion-item>
      <ion-input type="text" placeholder="placeholder" [(ngModel)]="tabForm[i].data"></ion-input>
    </ion-item>
  </ion-list>

  <button ion-button secondary menuToggle>Toggle Menu</button>
</ion-content>

page1.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-pag{"data":"e1}',
  templateUrl: 'page1.html'
})
export class Page1 {
  public tabForm = [];
  constructor(public navCtrl: NavController) {
    this.tabForm = [{ "data": "1" }, { "data": "2" }, { "data": "3" }, { "data": "4" }, { "data": "5" }, { "data": "6" }, { "data": "4" }, { "data": "8" }, { "data": "8" }, { "data": "2" }, { "data": "8" }, { "data": "2" }, { "data": "8" }, { "data": "2" }, { "data": "5" }, { "data": "5" }, { "data": "1" }, { "data": "5" }, { "data": "5" }, { "data": "5" }, { "data": "2" }, { "data": "2" }];
  }

}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';

@NgModule({
  declarations: [
    MyApp,
    Page1,
    Page2
  ],
  imports: [
    IonicModule.forRoot(MyApp,
      {
        backButtonText: '',
        backButtonIcon: 'arrow-back',
        menuType: 'reveal',
        tabbarPlacement: 'bottom',
        mode: 'md',
        platforms: {
          ios: {
            statusbarPadding: true
          }
        }
      })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Page1,
    Page2
  ],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }
7

Any idea about what i could change? Someone got same problem?