Beiträge von Sempervivum

  • Modale von Bootstrap zur Flexbox und von table zu grid

    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.

  • Modale von Bootstrap zur Flexbox und von table zu grid

    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:

    Code
            const modalContent = document.querySelector('div.modal-content');
        modalContent.addEventListener('touchstart', event => {
            event.stopPropagation();
        });
        modalContent.addEventListener('touchmove', event => {
            event.stopPropagation();
        });
        modalContent.addEventListener('touchend', event => {
            event.stopPropagation();
        });

  • Modale von Bootstrap zur Flexbox und von table zu grid

    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.

  • Modale von Bootstrap zur Flexbox und von table zu grid

    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:

    Und mit diesem CSS kannst Du die Elemente vierspaltig anordnen:

    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.

  • Modale von Bootstrap zur Flexbox und von table zu grid

    Interessante Fragen. Ich habe das mal mit dem Dialog-Element von HTML ausgetestet.

    Zitat

    ein 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.

    Zitat

    when 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.

  • Modale von Bootstrap zur Flexbox und von table zu grid

    Modale werden jetzt auch von HTML unterstützt, dort nennt es sich "Dialog":

    <dialog>: The Dialog element - HTML: HyperText Markup Language | MDN
    The <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.org

    Wenn 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-Tricks
    Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
    css-tricks.com

    Versuch mal ob Du damit und meinem Beispiel aus deinem vorigen Thread zum Ziel kommst.

  • Zelle zu Tabelle hinzugefügt! kann das Ergebnis nicht verstehen

    Bei so etwas offenbaren sich die Vorteile von Gridlayout: Kein zusätzlichen Container und Klassen, nur die Elemente aneinander gereiht und dann dieses CSS:

    Code
            div.modal-body div.grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 6fr 1fr;
        }

    Und das Umschalten auf vertikale Anordnung ist kinderleicht:

    Code
                div.modal-body div.grid-container {
                grid-template-columns: 1fr;
            }

    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-Tricks
    The :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 Level
    css-tricks.com

  • Flexboxprojekt reponsive erst ab 700px

    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:

    Code
    .flex-item-right img {
    min-width: 1px;
    min-height: 1px;
}

  • Flexboxprojekt reponsive erst ab 700px

    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 Blog
    The CSS flex property is a shorthand for setting how flexible items will grow or shrink to fill their parent container.
    blog.logrocket.com

    Demnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?