... getestet und funktioniert perfekt. Wieder etwas gelernt, vielen Dank für diesen Hinweis!
Beiträge von Sempervivum
-
-
Zitat von @Failix
sich – für mich besonders wichtig – auf Mobilgeräten mit dem Back-Button des Gerätes schließen lässt, ohne dass man gleichzeitig auch die Seite verlässt, von der aus das Modal geöffnet wurde. Dieses benutzerunfreundliche Verhalten findet man leider viel zu oft im Internet, die Bootstrap-Modale machen da keine Ausnahme.
Das ist ein interessanter Gesichtspunkt, hatte ich bisher gar nicht auf dem Schirm. Ich habe da eine Demo mit dem dialog-Element und werde versuchen, es dort einzubauen.
-
Guten Morgen,
ich verstehe das so, dass in der finalen Version das Grid viel mehr Zeilen hat, so dass es in das Modal nicht hinein passt.
Wenn wir das Eventbubbling für die Touchevents auf den Inhalt des Modals unterbinden, müsste das zum Ziel führen, versuche das:
Codeconst modalContent = document.querySelector('div.modal-content'); modalContent.addEventListener('touchstart', event => { event.stopPropagation(); }); modalContent.addEventListener('touchmove', event => { event.stopPropagation(); }); modalContent.addEventListener('touchend', event => { event.stopPropagation(); });
-
Für mich ist es erst Mal spät genug für heute, ich sehe mir das morgen an.
Gute Nacht!
-
Das hätte ich auch erwartet. Der Grund, dass das nicht passiert ist, dass text-align: center; von main>section geerbt wird. Warum sich das durchsetzt ist zunächst unerwartet. Meine Vermutung: Der Text ist ein eigener Knoten im DOM und die Flex-Anweisungen wirken auf diesen Knoten ohne den Text darin zu beeinflussen, das text-align jedoch auf den Text innerhalb des Knotens.
Beheben kannst Du das indem Du zusätzlich text-align-left; dem Flexitem zuweist.
-
Zitat
Verrätst Du uns auch was Du auf w3schools gefunden hast?
Die Frage hat sich geklärt, es ist das was Du jetzt online hast.
-
Verrätst Du uns auch was Du auf w3schools gefunden hast?
IMO ist die Entscheidung "Tabelle oder nicht" unabhängig davon ob sie sich in einem Modal oder direkt in der Seite befindet. Warum meinst Du denn, dass dein Werk misslungen ist? Vermutlich weil die einzelnen Zellen direkt aneinander hängen so dass man nicht erkennt, was wozu gehört? Das liegt aber am Styling und mit ein wenig Rändern oder Padding oder Margin kann man das sicher wesentlich verbessern.
Unabhängig davon hat ein Gridlayout aber gewisse Vorteile, ich glaube, ich habe schon Mal darauf hin gewiesen.
Ich habe mal deine Tabelle umgestellt:
Code
Alles anzeigen<div class="modal-body"> <div class="grid-container"> <div class="nr">Nr. 1</div> <div class="name">Michael Schlegel</div> <div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen Im allgemeinen Sprachgebrauch haben sich die Begriffe Angler oder Angelfischer durchgesetzt </div> <div class="phone">08154711</div> <div class="nr">Nr. 22</div> <div class="name">Franz Kowalsky</div> <div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div> <div class="phone">08154711</div> <div class="nr">Nr. 333</div> <div class="name">Klaus-Dieter Germann</div> <div class="desscription">Der Obermotz aus dem Odenwald Der Kasper, aus Streichholzhausen</div> <div class="phone">08154711</div> </div> </div>
Und mit diesem CSS kannst Du die Elemente vierspaltig anordnen:
Code
Alles anzeigen.grid-container { display: grid; /* 4 Spalten mit dem gewünschten Verhältnis der Breite anlegen */ grid-template-columns: 1fr 3fr 8fr 3fr; /* Damit es übersichtliche wird, einen kleinen Zwischenraum zwischen den Zellen erzeugen */ gap: 1em; } /* Bei schmalem Browserfenster auf einspaltige Anordnung umschalten */ @media (max-width: 800px) { .grid-container { grid-template-columns: 1fr; } }
Du siehst, es wird dadurch sehr kompakt. Auch auf die Klassen könntest Du verzichten wenn Du nth-of-type verwenden würdest. Allerdings ist es mit Klassen ein wenig klarer, was gestylt wird.
-
PS: Ich habe das noch ein wenig weiter untersucht: Öffne ich das Dialog-Element durch das Attribut "open" scrollt es mit dem übrigen Inhalt mit, so wie der Verfasser es beschreibt. Aber nur dann.
-
Interessante Fragen. Ich habe das mal mit dem Dialog-Element von HTML ausgetestet.
Zitatein Dialog scrollt mit der Seite mit.
Kann ich nicht bestätigen. Verhält sich wie ein mit position: fixed; positioniertes Element, d. h. bezogen auf das Browserfenster bleibt die Position fest und der übrige Inhalt scrollt darunter hindurch.
Zitatwhen the dialog is open you can still interact with the page just like normal.
Kann ich ebenfalls nicht bestätigen. Wenn mein dialog-Element offen ist, kann ich mit der übrigen Seite nicht mehr interagieren.
Kommt mir so vor als hätte der Verfasser eine private Vorstellung von dem Begriff "Dialog", die mit dem Verhalten des Dialog-Elementes von HTML nicht übereinstimmt.
Teste es am besten mal selbst aus, ob das Dialog-Element sich so verhält, wie Du es wünschst.
-
Ja, die Beschreibung scheint auch ziemlich gut zu sein, eben so wie einiges anderes auf kulturbanause.de.
-
Modale werden jetzt auch von HTML unterstützt, dort nennt es sich "Dialog":
<dialog>: The Dialog element - HTML: HyperText Markup Language | MDNThe <dialog> HTML element represents a modal or non-modal dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.developer.mozilla.orgWenn dort von Returnvalues und Forms die Rede ist, ist das für dich zunächst nicht relevant und Du kannst es zurück stellen.
Wie Du siehst, braucht man für das Öffnen und Schließen ein wenig Javascript. Hier muss man einräumen, dass auch Bootstrap gewisse Vorteile hat, indem es einem das abnimmt und verbirgt.
Was Grid betrifft, ist die Doku auf css-tricks immer noch sehr gut:
A Complete Guide to CSS Grid | CSS-TricksOur comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.css-tricks.comVersuch mal ob Du damit und meinem Beispiel aus deinem vorigen Thread zum Ziel kommst.
-
Bei so etwas offenbaren sich die Vorteile von Gridlayout: Kein zusätzlichen Container und Klassen, nur die Elemente aneinander gereiht und dann dieses CSS:
Und das Umschalten auf vertikale Anordnung ist kinderleicht:
Aber auch bei der jetzigen Lösung mit Tabellen könntest Du es vereinfachen und auf die Klassen verzichten, wenn Du nth-of-type verwendest:
:nth-of-type | CSS-TricksThe :nth-of-type selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Levelcss-tricks.com -
AFAIK ist Axel der Admin. Ich kann schon so viel sagen, dass dieses Forum arg zu gespammt wurde durch Posten eines scheinbar harmlosen Beitrages und Hineineditieren von Links ein paar Tage später. Ich vermute stark, dass das Editieren deshalb gesperrt wurde.
-
Vermutlich ein Schreibfehler: @media (max-width: 7700px)
-
Auch hier hilft es weiter, konsequent auf Flex zu setzen: Statt in der Mediaquery auf Wrapping umzuschalten, die Richtung auf column setzen:
Code@media (max-width: 770px) { .flex-container { /* flex-wrap: wrap; */ margin-bottom: 25px; flex-direction: column; } }
Dann gibt es noch eine Spezialität bei Flex: Der Default für min-width und min-height ist auto, d. h. Bilder können nicht unter ihre natürliche Größe schrumpfen. Also diese auf einen sehr kleinen Wert setzen:
-
Zitat
Wie würdest du das das Machen 2 Boxen mit 2/3 und 1/3 Aufteilung. Also so ungefähr.
Das ist sehr einfach zu machen: Linke Box flex: 2; und rechte Box flex: 1;.
-
Worin besteht denn das Problem genau? Wenn ich die Breite des Browserfensters ändere sieht es auch unter 700px ganz ordentlich aus, nur am Übergang zuckt es ein wenig.
Du benutzt für flex Prozentwerte, das war mir neu weil ich bisher nur dimensionslose Werte genommen hatte. Aber Browser und VS-Code akzeptieren es und ich musste erst nachlesen, wie sie es interpretieren. Bin dann hier fündig geworden:
CSS Reference Guide: flex - LogRocket BlogThe CSS flex property is a shorthand for setting how flexible items will grow or shrink to fill their parent container.blog.logrocket.comDemnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?
-
flex-item-left>h1 finde ich aber ich weiß nicht genau, was Du erreichen willst? Soll diese Überschrift über dem Text stehen? Dann musst Du entweder flex-direction: column; hinzu fügen oder einfach das display: flex; weg lassen, dann bauen sich die Elemente ohnehin übereinander auf.
-
Dass es da schon einen Block gibt, hatte ich gar nicht gesehen. Dann brauchst Du nur das flex-wrap: wrap; in den unteren zu übernehmen und kannst auf den ersten verzichten.
#filter>ul bedeutet, dass das ul ein direktes Kind ist während ein Leerzeichen bedeutet, dass es irgend ein Nachfahre sein kann, also auch Enkel, Urenkel etc.
Das ist hier ganz gut beschrieben:
-