Dialogfenster mit seltsamem Rahmen
Nico R.
Dialogfenster mit seltsamem Rahmen
Nico R.
JürgenB
Rolf BHallo zusammen,
ich hoffe die Problemstellung ist heute etwas anspruchsvoller als gestern 😏
Wenn ich ein dialog-Element per showModal() öffne, schaffe ich es partout nicht, dieses Viewportfüllend anzuzeigen. Es ist immer ein Abstand/Rahmen drum herum. Schön zu sehen, wenn man in meinem Beispiel margin von 0 auf auto setzt.
Zeige ich dialog nicht per showModal(), sondern generisch im HTML per <dialog open> an, ist der Rahmen nicht da.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
background-color: green;
}
dialog {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: none;
background-color: rgb(20,20,20);
}
</style>
</head>
<body>
<!--<dialog open></dialog>-->
<script>
const galerie = document.createElement('dialog');
document.body.appendChild(galerie);
galerie.showModal();
</script>
</body>
</html>
Das Verhalten ist in Chrome und Firefox gleich. Offensichtlich ist das also so gewollt. Vermutlich, um dem User zu zeigen, dass sich unter dem Fenster noch der eigentliche Inhalt der Seite befindet?
Ich weiß, dass ich per ::backdrop dem "Rahmen" die gleiche Farbe geben könnte, aber das löst leider mein Problem nicht. Denn ich möchte über das Fenster gerne Bilder aus einer Galerie anzeigen, und zwar in Vollbild, zumindest auf kleinen Bildschirmen.
Schöne Grüße
Nico
-
Hallo Nico,
in meinem Safari sehe ich in der Console im User-Agent-Stylesheet noch folgendes:
dialog:modal { position: fixed; overflow-x: auto; overflow-y: auto; inset-block-start: 0px; inset-block-end: 0px; max-width: calc(100% - 2em - 6px); max-height: calc(100% - 2em - 6px); visibility: visible;ergänze dein Stylesheet mal um
max-width:100vw; max-height:100vh;Gruß
Jürgen-
Hallo Jürgen,
max-width:100vw; max-height:100vh;dankeschön, das wars.
Das war ja dann doch wieder eine leichte Übung. Aus irgendeinem Grund war in den Einstellungen der FF-Konsole Browser-eigene Stile anzeigen deaktiviert. Ich weiß gar nicht warum, mir ists überhaupt nicht aufgefallen. Nicht meine Woche offensichtlich...
Schöne Grüße
Nico
-
Hallo Nico R.,
der von Dir erwähnte Rahmen ist ein Fokusrahmen. Wenn es im Dialog keine interaktiven Elemente gibt UND der Dialog durch ein Script geöffnet wird, das beim Seitenstart läuft, bekommt der Dialog den Fokusrahmen. Nimm den hin, das ist für die Zugänglichkeit wichtig.
Sobald der Dialog Eingabefelder oder Buttons enthält, wird der Fokusrahmen dorthin gesetzt.
Wenn Du einen Dialog ohne fokussierbare Elemente darin über einen Eventhandler öffnest, bekommt er den Fokusrahmen auch nicht.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
ah, okay. Ich werde mir das in Kürze nochmal ansehen und vermutlich noch eine oder zwei Nachfragen haben.
Für erste erst einmal danke.
Nico
-
-
-
Hallo JürgenB,
ja, das musste ich für Frickl 2 auch tun.
Rolf
--
sumpsi - posui - obstruxi
-