Ionic-framework: Kein Auffüllen für die Statusleiste (auf iOS) beim Navigieren in einem Modal

gleiches Problem hier. Ich habe es gelöst, indem ich die neue Seite nicht gepusht, sondern als zweites Modal präsentiert habe.

Hallo alle! Vielen Dank für die Verwendung von Ionic!. Ich freue mich, Ihnen mitteilen zu können, dass ich dieses Problem mit RC0 nicht mehr reproduzieren kann. Vielen Dank!

Dieser Fehler existiert immer noch. Dieses Problem kann nur auf einem tatsächlichen Gerät/Emulator reproduziert werden. Es wird in Desktop-Browsern nicht angezeigt, es sei denn, Sie übergeben { statusbarPadding: true } an die Konfigurationsvariable IonicModule.forRoot(MyApp, config) . Ich habe ein schnelles Repo erstellt, um dieses Problem mit RC0 zu demonstrieren https://github.com/msalcala11/modal-padding-bug.

Gleiches Problem hier.

Kann dieses Problem auch bestätigen

ja dieses Problem besteht noch. bitte wieder öffnen

Wir müssen die Modalitäten besser dokumentieren, wir haben Leute, die gerade daran arbeiten.
@comfortme @royipressburger @CyrisXD @msalcala11 @zmbc Sie müssen ein neues Ion-Nav erstellen, um in einem Modal navigieren zu können, genau wie Sie es in Ihrer App tun.

@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
})
export class NavigationModal {
  root = ModalFirstPage;
}

// YOUR CONTENT MODAL
@Component({})
export class ModalFirstPage {
}

(...)

  presentModalChildNav() {
    this.modalCtrl.create(NavigationModal).present();
  }

das macht für mich immer noch nicht wirklich sinn.

Ich habe eine Seite, zu der ich entweder von einer anderen Seite ODER von einem Modal navigiere, je nachdem, wo sich der Benutzer in der App befindet.

Wenn ich einen nav.push innerhalb des Modal mache, geht es auf die Seite, alles geht gut über und funktioniert genau so, wie ich es möchte. AUSSER, dass das Auffüllen der Statusleiste nicht angewendet wird, wenn ich von einem Modal zu der Seite navigiere.

Ich verstehe nicht wirklich, wie mir der obige Codeausschnitt dabei hilft? Dies scheint eine wirklich einfache Sache zu sein, da funktional alles funktioniert UND in einer der früheren Betas die Statusleistenauffüllung auch korrekt angewendet wurde, dies jedoch in einer späteren Version wieder defekt war.

Beachten Sie, dass Android kein Problem mit dem gleichen Code hat, das Navigieren entweder von einer anderen Seite oder von einem Modal aus ist alles richtig formatiert und funktioniert einwandfrei, ich würde erwarten, dass ios gleich ist.

Existiert immernoch. Irgendwelche einfachen Hacks, um dies zu verhindern?

Wenden Sie das folgende CSS auf ion-navbar und ion-title an, um dies zu beheben. Ich verwende ein ngIf*, um es nur anzuwenden, wenn die platform.is(iOS) als Android dies nicht benötigt. Dies wird beim Öffnen von einer anderen Seite unter iOS einfach vom Standard-CSS überschrieben, sodass auch dort keine Probleme auftreten.

Beachten Sie auch, dass alle Warnungen / Aktionsblätter / Popups, die Sie von der neu gepushten Seite öffnen, hinter der Seite geöffnet werden. Sie müssen den Z-Index-Wert hacken, damit diese Komponenten höher als der modale Z-Index sind, damit sie immer an erster Stelle stehen. Angesichts der Tatsache, dass diese Dinge sowieso immer ontop sein sollten, ist das nicht wirklich ein Problem.

<ion-navbar *ngIf="globals.isIos" style="height:calc(44px + 20px); min-height:calc(44px + 20px); padding-top:20px;">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title style="padding-top:14px !important;">{{selectedItem.name}}</ion-title>
  </ion-navbar>

Habe immer noch dieses Problem. Wird das bald behoben?

@mrhirsch Es gibt ein ähnliches Problem auf hier . Hör zu. Es ist nicht behoben, aber @manucorporat hat nach einem Repo-Beispiel gefragt, das ich dort bereitgestellt habe, also arbeiten sie hoffentlich daran.

@ghenry22

Die Art und Weise, wie Sie diese Polsterung machen, ist nicht gut. Verwenden Sie *ngIf , um Navigationsleisten basierend auf Plattformtypen auszublenden. Die Berechnung für die ion-content berücksichtigt anschließend die Navigationsleiste nicht und führt dazu, dass die gesamten ion-content nach oben verschoben werden.

Fügen Sie stattdessen in app.scss das folgende CSS hinzu.

.platform-ios .ios-header {
  height:calc(56px + 20px);
  min-height:calc(56px + 20px);
  padding-top:20px;
}

Dann einfach in der Kopfzeile, dass Sie dies benötigen (bei mir sind es alle Seiten, die ich auf die Tab-Seite drücke), fügen Sie einfach class="ios-header" .

<ion-header>
  <ion-navbar class="ios-header">
  </ion-navbar>
</ion-header>

Viel trockener und ohne das ion-content Problem. Wenn das Ionic-Team das selbst untersuchen würde, müssten wir natürlich nicht durch diesen Schmerz gehen.

Für jeden, der mit einem Popover darüber stolpert, ist dies das gleiche Problem.

Zur Lösung: Es ist keine gute Idee, den CSS-Fix-Ansatz zu verfolgen, da Sie nur etwas maskieren, das Sie nicht wie vorgesehen tun (auch wenn es ein bisschen seltsames Design ist).

Eine andere Lösung als die von manucorporat vorgeschlagene ist, mit Ereignissen zu arbeiten. Ich habe es so gemacht und es ist sehr einfach und sauber. Feuern Sie einfach ein Ereignis in Ihrer Modal- oder Popover-Seite ab und hören Sie auf Ihrer "Eltern"-Seite darauf. Mehr zu Veranstaltungen finden Sie hier: https://ionicframework.com/docs/api/util/Events/

@timvandijck Können Sie ein Beispiel geben?

@kabus202 Dies ist ein Beispiel mit einem Popover:

Die Seite, auf der Sie das Popover starten:

@Component({
    selector: 'page-my-page',
    templateUrl: 'my-page.html'
})
export class MyPage {
    popover = null;

    constructor(public navCtrl:NavController, public popoverCtrl: PopoverController, public events: Events) {
        this.events.subscribe('nav:my-other-page', () => {
            this.navCtrl.setRoot(MyOtherPage);

            if (this.popover) {
                this.popover.dismiss();
            }
        })
    }

    toggleActionsMenu(event) {
        this.popover = this.popoverCtrl.create(PopoverContentPage);
        this.popover.present({
            ev: event
        });
    }
}

Die Seite, die den Inhalt des Popovers enthält:

@Component({
    selector: 'page-popover-content',
    templateUrl: 'popover-content.html'
})
export class PopoverContentPage {

    constructor(public events: Events) {
    }

    registerAppliance() {
        this.events.publish('nav:my-other-page');
    }
}

Ja, das ist immer noch ein Thema. Wenn Sie versuchen, zum Zurückgehen zu streichen, kann dies manchmal auftauchen und die Ansicht unter dem Modal anzeigen. @jgw96

Noch vorhanden in ionisch-angular 3.3.0. Irgendeine Möglichkeit, es zu beheben?

@manucorporat Könnten Sie dieses Problem bitte erneut öffnen? Öffnen Sie modal in einer Seite, die von navController.push() geöffnet wurde, verursachen Sie die gleiche Situation wie im ersten Beitrag abgebildet.

Ja, bitte wieder öffnen

@vosecek Das Problem besteht, aber Sie können meinen oben geposteten CSS-Fix verwenden. Es funktioniert mit 3.3.

Hey Leute, schaut euch die Navigieren von einer Overlay-Komponente (unten eingefügt).

Beachten Sie die Verwendung von this.appCtrl.getRootNav() . Das hat bei mir sehr gut funktioniert, daher bin ich gespannt, ob die Verwendung von App dieses Problem für andere behebt. Wie auch immer, ich dachte nur, ihr solltet alle davon wissen.

Navigieren von einer Overlay-Komponente

import { Component } from '@angular/core';
import { App, ViewController } from 'ionic-angular';

@Component({
    template: `
    <ion-content>
      <h1>My PopoverPage</h1>
      <button ion-button (click)="pushPage()">Call pushPage</button>
     </ion-content>
    `
  })
  class PopoverPage {
    constructor(
      public viewCtrl: ViewController
      public appCtrl: App
    ) {}

    pushPage() {
      this.viewCtrl.dismiss();
      this.appCtrl.getRootNav().push(SecondPage);
    }
  }

Ich denke, die Frage ist, warum Sie so viel Overhead hinzufügen, wenn Sie nur nav.push können und alles funktioniert, außer ein bisschen CSS, das niemand zu reparieren scheint?

Es erinnert mich irgendwie an Apples "Halt es einfach anders" Reaktion auf Antennenprobleme.

Warum ist dieses Thema geschlossen, wenn es immer noch da ist?

@edwinchoate dies funktioniert, aber nicht, wenn das Popover noch aktiv sein muss, wenn Sie von der Seite zurückkehren. Ich glaube nicht, dass es möglich ist, wie eine normale Seite mit dem aktuellen Design zu einem Popover zu navigieren und zurück zu navigieren. Das Popover ist auf einer höheren Ebene als alle normalen Seiten positioniert, daher ist das Verwerfen erforderlich. Es sei denn, sie ändern das Verhalten von Popover insgesamt.

Da dieser Fehler nicht behoben wurde, habe ich diesen SCSS-Code als Problemumgehung hinzugefügt und er hat für mich funktioniert. Ich hoffe, es ist nützlich für Sie:

.toolbar-ios {
  height: 44px + $cordova-ios-statusbar-padding;
  padding-top: $cordova-ios-statusbar-padding;
}

.toolbar-title-ios {
  padding-top: $cordova-ios-statusbar-padding;
}

An all die Leute, die immer noch darüber stolpern. @manucorporat hat schon die richtige Idee präsentiert. Der Code hat nur einen Fehler und ist etwas unvollständig. Ich habe dies mit Ionic 3.6.0 getestet.

Fügen Sie in die Inhaltsseite, die Sie als Modal präsentieren, einfach eine weitere Wrapper-Seitenklasse mit einem nav-Element wie diesem ein:

@Component({
    template: '<ion-nav [root]="this.rootPage" [rootParams]="this.rootParams"></ion-nav>'
})
export class MyModalWrapper {
    private rootPage = MyModalContentPage;
    private rootParams;
    constructor(navParams: NavParams, private viewCtrl: ViewController) {
        this.rootParams = navParams;
        this.rootParams["data"]["closeModal"] = this.onCloseModal
    }
    onCloseModal = () => {
        this.viewCtrl.dismiss();
    }
}

Und dann ändern Sie Ihre Inhaltsseitenklasse wie folgt:

@Component({ /* ... */ })
export class MyModalContentPage {
    /* ... */
    private closeModal;
    constructor(navParams: NavParams, /* ... */) {
        this.closeModal = navParams.get("closeModal");
    }
    /* ... */
}

Jetzt können Sie closeModal wie eine normale Funktion in Ihrer Klasse oder Vorlage aufrufen.

Jetzt müssen Sie nur noch MyModalContentPage durch MyModalWrapper ersetzen, wo immer Sie das Modal erstellen und präsentieren. Also statt:

this.modalCtrl.create(MyModalContentPage, { /* ... */ }).present();

mach das:

this.modalCtrl.create(MyModalWrapper, { /* ... */ }).present();

Hoffe das hilft.

@codemusings Ich habe es so gemacht:

@Component({
  template: '<ion-nav [root]="root" [rootParams]="params"></ion-nav>'
})
export class MyModalWrapper {
  root = MyModalContentPage;
  params: any;

  constructor(
    public navParams: NavParams,
    viewCtrl: ViewController,
  ) {
    this.params = Object.assign({}, navParams.data, {viewCtrl: viewCtrl});
  }
}

@Component({ /* ... */ })
export class MyModalContentPage {
    /* ... */
    private viewCtrl: ViewController;
    constructor(navParams: NavParams, /* ... */) {
        this.viewCtrl = navParams.get('viewCtrl');
    }
    /* ... */
    someFunc() {
      this.viewCtrl.dismiss();
    }
}

Indem Sie das ganze ViewController , können Sie dasselbe this.viewCtrl.dismiss() Sie normalerweise verwenden würden; außer im Konstruktor sind keine Änderungen an der Inhaltsseite erforderlich.

Ich bin auf Ionic 3.3.0 aber ich vermute, es würde auch auf dem neuesten Stand funktionieren.

Aber die Sache ist, funktional funktioniert es so wie es ist und es ist kein zusätzlicher Code erforderlich, nur ein einzeiliger CSS-Fix nur für iOS und das ist nicht einmal ein Problem.

@ghenry22 Das ist nicht ganz richtig für große Bildschirme, z. B. iPad, bei denen die übertragene Seite im Vollbildmodus angezeigt wird, obwohl das Modal klein ist.

Ich wünsche nav.push in einem Modal Just Worked. Aber ich würde es lieber auf diese komplexere Weise tun, als mich auf hackigere CSS-Fixes zu verlassen.

@ghenry22 @zmbc Die Nav-Ansicht impliziert einen separaten Nav-Stack, den Sie beim Öffnen eines

Wenn Sie navCtrl.pop aufrufen, kann es zu unbeabsichtigten Problemen mit der Root-Navigation kommen, da Ionic nicht versteht, wann Sie sich in einem Modal befinden und wann nicht.

Ich habe auch kein Problem mit gepushten Seiten auf iOS? Ich meine, ich werde es jetzt noch einmal testen, da Sie es erwähnt haben, um sicherzugehen, aber sie bleiben für mich innerhalb der Grenzen des Modal.

Wenn ich eine Seite aus einem Modal heraus pushe oder öffne, erwarte ich, dass sie geladen und innerhalb des Modal gebunden wird.

Wenn ich auf eine normale Seite drücke oder klicke, erwarte ich, dass sie mit einer normalen Vollbildseite geladen wird.

Ich habe Seiten, die ich in beiden Szenarien verwenden kann, sodass das Hinzufügen von Code zum Behandeln eines Szenarios zu Problemen im anderen führen kann.

Wenn Sie möchten, dass die verschobene Seite in einem Modal auf dem iPad im Vollbildmodus geöffnet wird, müssen Sie wahrscheinlich eine Funktion haben, die das Modal schließt und dann die Seite schiebt, was mit Sicherheit etwas unordentlich werden könnte.

@wbhob Dies kann das gewünschte Ergebnis sein, aber Sie müssen sich nur dieses Ticket und die Ionenforen und den Stapelüberlauf ansehen, um zu sehen, dass dieselbe Frage immer wieder gestellt wird.

Es ist also offensichtlich ein Problem aus reiner Usability-Sicht für die Menschen. Es wäre toll, wenn ionic etwas unter der Haube implementieren könnte, damit es "einfach funktioniert" dann würden alle Kommentare und Anfragen zu diesem geschlossenen Thema aufhören :)

Eine PR an die Dokumente gemacht @ghenry22

Meine PR wurde zusammengeführt! Überprüfen Sie die modalen Dokumente

@ jgw96 Ich hoffe, dass dies mit Ionic4 gelöst wird. Es ist seit ionic2 RC0 ohne Aktion herausragend, was ein bisschen schockierend ist, wenn man bedenkt, dass es sich um einen einfachen CSS-Fix handelt und die Verwendung der Navigation dann wie erwartet funktioniert, egal ob Sie sich auf einer modalen oder einer normalen Seite befinden. So wie es sollte.

Es funktioniert wie erwartet, ist kein Problem. Details dazu finden Sie in den Ionic-Dokumenten (ich habe diesen Teil der Dokumente geschrieben)

@wbhob außer es funktioniert nicht wie erwartet. Wie die zahlreichen Threads im Forum zeigen. Probleme hier und beim Stapelüberlauf.

Die Navigation funktioniert genau so, wie Sie es erwarten würden, mit der Ausnahme, dass die gepushte Seite beim Auffüllen ihren Status verliert. Dies ist ein einfacher CSS-Fix und erfordert nichts Komplizierteres.

Ihre empfohlene Problemumgehung und andere umfassen das Schließen des Overlays, bevor Sie die neue Seite öffnen. Dies ist für meine App kein praktikabler Ansatz, da ich möchte, dass der Benutzer einige Informationen entweder von einem Modal ODER von anderen regulären Seiten anzeigen kann und wenn er von einem Modal aus angezeigt wird, möchte ich, dass er zum Modal zurückkehren kann.

Wie auch immer, ich habe einen CSS-only-Fix ​​dafür in eines der anderen Probleme gepostet, die neulich dafür protokolliert wurden, die es für mich vollständig gelöst haben, indem ich einfach die standardmäßigen ionischen Seitenstile wie in einer nicht-modalen Einstellung anwendete.

Der richtige Weg, dies zu tun, besteht darin, eine eigenständige Navigationsinstanz innerhalb des Modal zu erstellen. Ihre Absicht ist es, zu zusätzlichen Seiten zu navigieren, aber wenn Sie navCtrl.push aufrufen, wird es, wie zu erwarten, gegen den Root-Nav-Stack ausgeführt, da es es nicht besser weiß. Wenn Sie es richtig machen und einen Navigationsstapel exklusiv für das Modal erstellen, funktioniert es ordnungsgemäß.

Ja, das ist eine Möglichkeit, dies für ein bestimmtes Szenario zu tun. Angenommen, Sie möchten in Ihrem Anwendungsfall das geöffnete Overlay (Modal/Popover usw.) schließen und DANN die Seite öffnen. In diesem Szenario funktioniert ja, was Sie gesagt haben und was in den Ionic-Komponentendokumenten für den Navigationscontroller angezeigt wird.

Ich möchte das geöffnete Modal nicht schließen, ich möchte zu einer Seite navigieren können, die einige zusätzliche Informationen anzeigt, und wenn Sie fertig sind, klicken Sie auf ZURÜCK, um zu dem Modal zurückzukehren, von dem aus die Seite geöffnet wurde. Dieses Szenario wird in den Dokumenten, auf die Sie sich beziehen, nicht abgedeckt.

Für das zweite Szenario funktioniert von der Funktionalität her alles perfekt. Auf Android funktioniert alles ohne Probleme. Das einzige Problem ist, dass auf IOS nur die richtige CSS-Klasse nicht auf die gepushte Seite angewendet wird, wenn sie von einem Overlay gepusht wird. Dafür gibt es einen einfachen CSS-Fix.

Fügen Sie einfach den folgenden Befehl in Ihre app.scss ein und Sie können loslegen, da die richtige Klasse jetzt auf Seiten angewendet wird, unabhängig davon, ob sie von einer modalen oder einer anderen regulären Seite übertragen werden.

Jetzt funktionieren beide Szenarien gut.
1) Wenn Sie das Overlay schließen und eine neue Seite laden möchten, verwenden Sie die Methode in den Navcontroller-Dokumenten.
2) Wenn Sie das Overlay nicht verwerfen und eine neue Seite laden möchten, die ZURÜCK gehen kann und immer noch das Quell-Overlay verfügbar hat, fügen Sie einfach das unten stehende CSS ein und es behebt das Layout-Problem.

// handle top padding disappearing in modals
<strong i="12">@media</strong> only screen and (max-width: 767px){
    .ios > .ion-page > ion-header > .toolbar.statusbar-padding:first-child {
        padding-top: calc(20px + 4px);
        padding-top: calc(constant(safe-area-inset-top) + 4px);
        padding-top: calc(env(safe-area-inset-top) + 4px);
        min-height: calc(44px + 20px);
        min-height: calc(44px + constant(safe-area-inset-top));
        min-height: calc(44px + env(safe-area-inset-top));
        }
}

@ghenry22 Ich glaube, du

Ich denke, Ihre App hat wahrscheinlich einen Fehler, wenn Sie dieses Verhalten mit der empfohlenen Lösung nicht sehen. Wenn ich Sie wäre, würde ich eine StackOverflow-Frage öffnen, um zu versuchen, sie zu debuggen. Jemand dort könnte dir helfen, es herauszufinden.

Dieses Problem ist nicht der richtige Ort, da diese Funktionalität bereits in Ionic enthalten ist und für den allgemeinen Gebrauch ausreichend dokumentiert wurde.

@zmbc https://ionicframework.com/docs/api/navigation/NavController/
Die Dokumente hier zum Navigieren von einem Overlay zeigen, dass dismiss() aufgerufen wird, bevor zur nächsten Seite navigiert wird. Darauf habe ich mich bezogen.

Beim Durchstöbern der alten PR-Protokolle scheint es, dass die von @wbhob hinzugefügten widergespiegelt werden. Ich werde die Lösung aus den alten Commits ausprobieren, aber wenn es so funktioniert, wie Sie es sagen, wäre es gut, diese Informationen in die API-Dokumente oder Beispiele für die Nav-Controller-Komponente aufzunehmen, damit sie tatsächlich leicht gefunden werden können.

Wenn jedoch die richtigen CSS-Klassen angewendet werden (wie bei Android), ist keine Umgehung oder zusätzlichen Code vom Benutzer erforderlich, wäre dies sicherlich ein wünschenswertes Ergebnis?

@ghenry22 Ich bin mir nicht mehr sicher, wo die Dokumentation im Projekt lebt, aber ich denke, Sie haben Recht , dass die Änderungen von ModalController , nicht in NavController ) sind.

Wie ich bereits erläutert habe

Ich empfehle Ihnen , diesen Ansatz zu verwenden, um genau das zu tun, was Sie möchten: eine Seite auf ein Modal verschieben und die Möglichkeit haben, zum Modal zurückzukehren. Wenn Sie das nicht möchten, liegt es an Ihnen. Aber das ist bei Ionic ganz klar kein Problem.

@zmbc die Dokumentation würde sich auf dem navController befinden, da dieser für die Navigation verwendet wird. Das ModalControl erstellt und präsentiert lediglich das Modal.

Ich würde nicht zustimmen, dass das CSS undurchsichtig ist, es ist das standardmäßige ionische CSS, das auf eine Seite angewendet wird, wenn es normal übertragen wird ), weshalb dies als Fehler behoben werden sollte, der sich auf die iOS-Plattform für Ionic auswirkt, sodass die Benutzer keinen Fix anwenden MÜSSEN.

Dieses Problem existiert nicht auf Android, das ohne Änderungen perfekt funktioniert. Dies scheint also ein plattformspezifischer Fehler bei der ionischen Anwendung von CSS-Klassen zu sein.

Ich gebe zu, dass ich es noch nicht auf einem Gerät mit größerem Bildschirm getestet habe und dort möglicherweise noch etwas anderes benötigt wird, das werde ich mir ansehen.

Ich kann sehen, dass es eine Lösung gibt, die aus den Dokumenten verloren gegangen ist und jetzt nur noch als Kommentar im Header einer Quelldatei vorhanden ist. Wenn diese Lösung in den offiziellen Nav-Controller-Dokumenten im Abschnitt über die Navigation von einem Modal aus wiederhergestellt werden kann, gibt es zumindest eine dokumentierte Lösung und die Dokumentation ist für Personen, die die Ionic Docs lesen, leicht zugänglich.

Wir werden uns eindeutig nicht darauf einigen, welcher Ansatz richtig oder falsch ist, also lassen wir das beiseite, solange es einen offiziell empfohlenen Weg gibt, dies (was auch immer es ist) richtig zu den Dokumenten hinzuzufügen, dann ist das gut genug für mich.

Danke für das Problem! Dieses Problem wird gesperrt, um Kommentare zu verhindern, die für das ursprüngliche Problem nicht relevant sind. Wenn dies immer noch ein Problem mit der neuesten Version von Ionic ist, erstellen Sie bitte ein neues Problem und stellen Sie sicher, dass die Vorlage vollständig ausgefüllt ist.