/ / Wie kann ich Foundation 5 enthüllen, wenn es zu groß ist? - zurb-foundation, reveal.js, zurb-foundation-5, zumb-layer

Wie kann ich Foundation 5 enthüllen, wenn es zu groß ist? - zurb-foundation, reveal.js, zurb-foundation-5, zumb-layer

Ich benutze ein offensichtliches Modal. Der Inhalt kann abhängig von der Fenstergröße zu groß sein, um auf den Bildschirm zu passen.

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

Der folgende Screenshot stammt aus einem Chromfenster, das auf die Größe eines Mobilgeräts eingestellt ist. Es gibt einen Knopf am unteren Rand des Formulars, der nicht gedrückt werden kann, weil er nicht zu sehen ist.

Das Fenster oder der modale Inhalt wird geblättert. Auch die Spitze des Modals scheint zu niedrig zu sein, aber das ändert nichts an der Zugänglichkeit des Knopfes an der Unterseite.

Bildbeschreibung hier eingeben

Antworten:

0 für die Antwort № 1

Sie müssen die Schwelle erwähnen Höhe für das offenbare Modal, nach dem die overflow-y wird berücksichtigt und eine Bildlaufleiste erscheint.

.reveal-modal
{
max-height:initial; //reset any max-height set by foundation defaults
height:600px; //replace value with your desired height
overflow-y:scroll;
}

0 für die Antwort № 2

Ich konnte die Höhe mit einem Top auf 60% einstellenMarge von 20% und 100vh im mobilen Modus. 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. Das konnte ich tun:

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


0 für die Antwort № 3

Fügen Sie die Klasse "full" zu "reveal-modal" hinzu und die Höhe wird auf 100% scrollbar gesetzt:

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

In diesem Modus habe ich festgestellt, dass das Hintergrund-Overlay (Schatten und Rahmen) Probleme hatte. Daher habe ich das folgende CSS hinzugefügt, um das Hintergrund-Overlay zu entfernen:

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

Hier "s meine Beispielseite