Bootstrap 3 modal verschwindet auf dem iPad Safari erst, nachdem die Option aus dem Auswahlmenü ausgewählt wurde

9

Ich habe eine Registrierungsfunktion in einer Webanwendung, die einen Benutzer durch einen vierstufigen Prozess führt, um Informationen zur Website hinzuzufügen. Wenn ein Benutzer auf die Schaltfläche "Hinzufügen" klickt, wird ein Bootstrap-Modal angezeigt und der Benutzer startet in Schritt 1.

Jeder Schritt verfügt über ein Menü mit Optionen, aus denen der Benutzer auswählen kann, und die Daten, die in jedem Schritt ausgefüllt werden, hängen von den Auswahlmöglichkeiten der vorherigen Schritte ab. Ein Benutzer kann einen Schritt leer lassen und fortfahren, aber dann haben sie keine Wahl für den Rest des Prozesses. Diese Funktionalität verhält sich wie erwartet in jedem Desktop- und Mobilbrowser mit Ausnahme von Safari auf dem iPad.

In Safari wird der Benutzer das Modal öffnen, Daten in Schritt 1 auswählen und zu Schritt 2 wechseln. Wenn der Benutzer in diesem Dropdown nichts auswählt, kann er mit Schritt 3 fortfahren. Wenn er jedoch eine Auswahl trifft In Schritt 2 verschwindet das Modal und der Benutzer kann nicht fortfahren. Dies geschieht nur in Safari für iPad / iPhone.

Ich habe versucht, den Web Inspector auf dem iPad einzurichten und die Konsole auf einen Mac zu laden, aber es gibt keine Fehler oder andere Meldungen in der Konsole. Ich versuche herauszufinden, ob dies ein Fehler in Safari ist oder ob Safari modale Eingaben von einem Select-Tag anders als andere Browser behandelt.

    
JohnR 06.02.2015, 06:01
quelle

3 Antworten

0

Hatte ein Entwicklerfreund einen Blick darauf werfen müssen. Er fügte diese Funktion hinzu:

%Vor%

}

%Vor%

}

Und dann der modale Aufruf:

%Vor%

Dies scheint das Problem behoben zu haben. Hoffe das hilft anderen!

    
JohnR 25.03.2015 17:24
quelle
0

Dies scheint durch den fade -Übergang verursacht zu sein. Ich habe zuerst festgestellt, ob die App auf iOS läuft, und dann eine Abfrage für .modal elements durchgeführt und die Klasse fade entfernt. Dies löste das Problem sowohl auf dem iPad / iPhone. Hinweis: Der Modal-Hintergrund erfordert möglicherweise zusätzliche Anstrengungen, um das Spielen mit der virtuellen Tastatur, die ein- und ausgeht, angenehm zu gestalten.

Zur Veranschaulichung:

%Vor%

Bearbeiten: iPad (horizontal) auch erforderlich

%Vor%     
Mati 11.12.2015 12:12
quelle
0
___ qstntxt ___

Ich habe eine Registrierungsfunktion in einer Webanwendung, die einen Benutzer durch einen vierstufigen Prozess führt, um Informationen zur Website hinzuzufügen. Wenn ein Benutzer auf die Schaltfläche "Hinzufügen" klickt, wird ein Bootstrap-Modal angezeigt und der Benutzer startet in Schritt 1.

Jeder Schritt verfügt über ein Menü mit Optionen, aus denen der Benutzer auswählen kann, und die Daten, die in jedem Schritt ausgefüllt werden, hängen von den Auswahlmöglichkeiten der vorherigen Schritte ab. Ein Benutzer kann einen Schritt leer lassen und fortfahren, aber dann haben sie keine Wahl für den Rest des Prozesses. Diese Funktionalität verhält sich wie erwartet in jedem Desktop- und Mobilbrowser mit Ausnahme von Safari auf dem iPad.

In Safari wird der Benutzer das Modal öffnen, Daten in Schritt 1 auswählen und zu Schritt 2 wechseln. Wenn der Benutzer in diesem Dropdown nichts auswählt, kann er mit Schritt 3 fortfahren. Wenn er jedoch eine Auswahl trifft In Schritt 2 verschwindet das Modal und der Benutzer kann nicht fortfahren. Dies geschieht nur in Safari für iPad / iPhone.

Ich habe versucht, den Web Inspector auf dem iPad einzurichten und die Konsole auf einen Mac zu laden, aber es gibt keine Fehler oder andere Meldungen in der Konsole. Ich versuche herauszufinden, ob dies ein Fehler in Safari ist oder ob Safari modale Eingaben von einem Select-Tag anders als andere Browser behandelt.

    
___ answer29262379 ___

Hatte ein Entwicklerfreund einen Blick darauf werfen müssen. Er fügte diese Funktion hinzu:

%Vor%

}

%Vor%

}

Und dann der modale Aufruf:

%Vor%

Dies scheint das Problem behoben zu haben. Hoffe das hilft anderen!

    
___ tag123ios ___ iOS ist das mobile Betriebssystem, das auf dem Apple iPhone, iPod touch und iPad ausgeführt wird. Verwenden Sie dieses Tag [ios] für Fragen zur Programmierung auf der iOS-Plattform. Verwenden Sie die verwandten Tags [objective-c] und [swift] für Probleme, die für diese Programmiersprachen spezifisch sind. ___ tag123mobilesafari ___ Eine mobile Version von Apples Safari-Webbrowser. ___ tag123twitterbootstrap ___ Bootstrap ist ein Front-End-Framework, das entwickelt wurde, um die Entwicklung von Web-Apps und -Websites anzukurbeln. Bei Fragen zu einer Bootstrap-Version verwenden Sie auch die Tags der jeweiligen Version aus den Tags "twitter-bootstrap-2", "twitter-bootstrap-3" und "bootstrap-4". ___ qstnhdr ___ Bootstrap 3 modal verschwindet auf dem iPad Safari erst, nachdem die Option aus dem Auswahlmenü ausgewählt wurde ___ tag123bootstrapmodal ___ Bootstrap stellt ein JavaScript-aktiviertes Dialogelement zur Verfügung, das verwendet werden kann, um native Dialoge (bis zu einem gewissen Grad) zu ersetzen; Im Gegensatz zu nativen Dialogen können Bootstrap-Modale den Ablauf der Ausführung nicht blockieren. ___ answer4300956 ___

Ich hatte ein ähnliches Problem mit einer Dropdown-Liste in einem Container, die bei der Auswahl verschwand, und dies geschah NUR auf einem tatsächlichen IPAD-Gerät (Einchecken von Chrom mit der Gerätesymbolleiste mit ausgewähltem "IPAD" funktionierte gut). Dies scheint ein bekannter Fehler zu sein, wie im obigen Kommentar erwähnt.

Durch das Ändern der CSS für den Container auf position: absolute wurde das Problem für mich gelöst. Es würde jedoch das Layout für andere Geräte & amp; Ansichtsfenster.

Der Fix bestand darin, nur IPADs mit der modifizierten CSS-Regel zu targetieren:

%Vor%     
___ answer34223294 ___

Dies scheint durch den %code% -Übergang verursacht zu sein. Ich habe zuerst festgestellt, ob die App auf iOS läuft, und dann eine Abfrage für %code% elements durchgeführt und die Klasse %code% entfernt. Dies löste das Problem sowohl auf dem iPad / iPhone. Hinweis: Der Modal-Hintergrund erfordert möglicherweise zusätzliche Anstrengungen, um das Spielen mit der virtuellen Tastatur, die ein- und ausgeht, angenehm zu gestalten.

Zur Veranschaulichung:

%Vor%

Bearbeiten: iPad (horizontal) auch erforderlich

%Vor%     
___
JisuKim82 13.04.2017 20:11
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Debuggen von Rspec Postgres-Sperren