Wie kann ich Foundation 5 enthüllen, wenn es zu groß ist?

Ich verwende ein Reveal Modal. Der Inhalt kann abhängig von der Fenstergröße zu groß sein, um auf den Bildschirm zu passen.Wie kann ich Foundation 5 enthüllen, wenn es zu groß ist?

Egal was ich mache, kann ich nicht scrollen, um den ganzen Inhalt zu sehen. Ich habe versucht, das modale selbst überlaufen-y: auto ;, aber das hat nicht geholfen.

Der folgende Screenshot stammt aus einem Chromfenster, das auf die Größe eines Mobilgeräts eingestellt ist. Am unteren Rand des Formulars befindet sich eine Schaltfläche, die nicht gedrückt werden kann, weil sie nicht sichtbar ist.

Das Fenster noch der modale Inhalt wird scrollen. Auch scheint die Spitze des Modals zu niedrig zu sein, aber das scheint sich mit der Zugänglichkeit des Knopfes an der Unterseite nicht zu ändern.

Quelle

2016-07-24 DAB

Sie haben die Schwelle zu erwähnen Höhe für die offenbaren modal, wonach die overflow-y betrachtet wird und eine Bildlaufleiste angezeigt.

Quelle

2016-07-26 08:46:42

Das Problem dabei ist, dass es jetzt eine feste Höhe ist, die nicht immer abhängig von der Bildschirmgröße funktioniert. Ich habe einen anderen Weg gefunden, obwohl ich denke, dass es ein Bandaid ist. – DAB

Wenn die Verwendung mit mehreren Bildschirmen Ihr Problem ist, können Sie unterschiedliche Höhe für verschiedene Bildschirme mit CSS-Medienabfragen angeben. Oder Sie können auch '%' Werte anstelle von 'px'Values angeben. Aber auch hier müssen Sie Medienabfragen verwenden, wenn Sie nach Perfektion streben. –

Ich konnte die Höhe auf 60% mit einem oberen Rand von 20% und 100vh im mobilen Modus einstellen. Ich musste auch die Dialogposition auf fix ändern und die Scroll-Einstellung deaktivieren, was meiner Meinung nach eine neue Ergänzung nach 5.2.2 war, was erklären würde, warum ich dieses Problem erst vor kurzem nach der Aktualisierung hatte. Dies ist, was ich in der Lage war zu tun: die Klasse "voll"

https://github.com/macdabby/Lightning/commit/202ae9156ebf034c8cb4b625161015763fa0658f

Quelle

2016-07-26 19:41:03 DAB

zu "enthüllen-modal" und die Höhe wird scrollbaren bis 100% eingestellt werden:

<div id="myModal" class="reveal-modal full" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

In dieser Modus, bemerkte ich, dass der Hintergrund Overlay (& Grenze Schatten) hatte Probleme, so dass ich addierten die folgenden CSS den Hintergrund Overlay zu entfernen:

<style> 
.reveal-modal { 
    border:0 none; 
    box-shadow:none; 
} 
.reveal-modal-bg { 
    background-color: transparent; 
} 
</style>

Hier ist my example page

Quelle

2016-08-16 03:46:04 asonnenshine

Wie kann ich Foundation 5 enthüllen, wenn es zu groß ist?

Antwort

Verwandte Themen