Beiträge von Sempervivum

Sempervivum

Da war noch ein Fehler drin: Eventlistener wurde mehrfach registriert wenn man mehrere Instanzen anlegt. Hier die korrigierte Klasse:

Code

        class StylableSelect {
            static isRegistered = false;
            constructor(selector) {
                this.selector = selector;
                if (!StylableSelect.isRegistered) {
                    StylableSelect.isRegistered = true;
                    window.addEventListener('click', event => {
                        if (event.target.classList.contains('stylable-select-out')) {
                            console.log('out clicked')
                            event.target.closest('.stylable-select')
                                .querySelector('.stylable-select-options')
                                .classList.toggle('hidden');
                        }
                        const
                            lbl = event.target.closest('label:not(.stylable-select-out)');
                        let select = null;
                        if (lbl) select = lbl.closest('.stylable-select');
                        if (select) {
                            const
                                selectedLabel = select.querySelector('label.selected');
                            if (selectedLabel) selectedLabel.classList.remove('selected')
                            lbl.classList.add('selected');
                            select.querySelector('input[name]').value
                                = select.querySelector('label.selected input').value;
                            select.querySelector('.stylable-select-out span').textContent
                                = select.querySelector('label.selected').textContent;
                            select.querySelector('.stylable-select-options').classList.add('hidden');
                        }
                    });
                }
            }
            getValueAndText() {
                const
                    out = document.querySelector(this.selector).querySelector('.stylable-select-out'),
                    text = out.querySelector('span').textContent,
                    value = out.querySelector('input').value;
                return { value: value, text: text };
            }
        }

Alles anzeigen

Sempervivum

Wenn Du viel gelesen hast, hilft es wahrscheinlich auch nicht, einen weiteren Link zu posten. Häufig hilft ein Beispiel weiter, sieh dir dieses Codepen an:

xxMYooK

...

codepen.io

nth-child nimmt alle Elemente her und prüft das 2-te. Ist es ein p-Element wird es genommen.

Die zweite Regel nimmt von allen Elementen das 2-te und prüft ob es ein h1- Element ist. Da es jedoch ein p-Element ist, passiert gar nichts.

nth-of-type nimmt nur die p-Elemente und nimmt davon das 2-te (die dritte Regel).

In den allermeisten Fälle tut nth-of-type das, was man möchte.

Das ganze ist schon ein wenig undurchsichtig und deshalb habe ich auch früher geschrieben, dass auch Klassen den Vorteil haben, dass es klarer ist, was passiert.

Sempervivum

Die Klasse "item" kannst Du weg rationalisieren, indem Du den Kindselektor verwendest:

CSS/Selektoren/Kindselektor – SELFHTML-Wiki

Also:

Code

.grid-container>div:nth-of-type(4n + 1){
    font-weight: bold;
    color:blue;
}

Sempervivum

PS: Das native Select am Anfang war nur zu meiner Orientierung, es hat mit dem Ersatz nichts zu tun und kann weg gelassen werden.

Sempervivum

Liebe Forengemeinde,

ein select zu stylen ist leider nur sehr eingeschränkt möglich. Ich kenne die Alternativen Select2 und Selectize, die sind hervorragend aber alles andere als leichtgewichtig. Daher bin ich daran gegangen und habe eine schlanke Alternative programmiert, mit der Einschränkung, dass Multi-Select nicht unterstützt wird.

Hier meine Demo:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Stylable Select With Radiobuttons</title>
    <style>
        /* Begin stylable select */
        .stylable-select {
            position: relative;
            display: inline-block;
            font-family: Arial, Helvetica, sans-serif;
        }

        .stylable-select .stylable-select-options {
            display: flex;
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background-color: white;
        }

        .stylable-select .stylable-select-options.hidden {
            display: none;
        }

        .stylable-select .stylable-select-out::after {
            content: '▼';
        }

        .stylable-select .stylable-select-out {
            min-width: 8em;
            display: flex;
            justify-content: space-between;
            border: 1px solid blue;
            padding-left: 0.2em;
        }

        .stylable-select .stylable-select-options label {
            border: 1px solid lightblue;

        }

        .stylable-select label.selected {
            background-color: lightgray;
        }

        /* End stylable select */

        /* Custom styles: */
        .stylable-select .stylable-select-options label {
            border: 2px solid darkgreen;
            border-radius: 2px;
            background-color: lightgreen;
        }

        .stylable-select .stylable-select-options label::before {
            content: '•';
            margin-left: 0.2em;
            margin-right: 0.2em;
        }
    </style>
</head>

<body>
    <select>
        <option>Opt 1</option>
        <option>Opt 2</option>
        <option>Opt 3</option>
        <option>Opt 4</option>
    </select>
    <button id="btn-out-val">Output Value</button>
    <!-- Begin stylable select -->
    <!-- Modify ID -->
    <div class="stylable-select" id="select1">
        <label class="stylable-select-out">
            <span>Select an option</span>
            <!-- Modify name of input -->
            <input name="select1" value="" hidden>
        </label>
        <div class="stylable-select-options hidden">
            <!-- Modify options or labels containing radio buttons -->
            <label><input type="radio" value="opt1" hidden>Option 1</label>
            <label><input type="radio" value="opt2" hidden>Option 2</label>
            <label><input type="radio" value="opt3" hidden>Option 3</label>
            <label><input type="radio" value="opt4" hidden>Option 4</label>
        </div>
    </div>
    <!-- End stylable select -->
    <script>
        class StylableSelect {
            constructor(selector) {
                this.selector = selector;
                window.addEventListener('click', event => {
                    if (event.target.classList.contains('stylable-select-out')) {
                        event.target.closest('.stylable-select')
                            .querySelector('.stylable-select-options')
                            .classList.toggle('hidden');
                    }
                    const
                        lbl = event.target.closest('label:not(.stylable-select-out)');
                    let select = null;
                    if (lbl) select = lbl.closest('.stylable-select');
                    if (select) {
                        const
                            selectedLabel = select.querySelector('label.selected');
                        if (selectedLabel) selectedLabel.classList.remove('selected')
                        lbl.classList.add('selected');
                        select.querySelector('input[name]').value
                            = select.querySelector('label.selected input').value;
                        select.querySelector('.stylable-select-out span').textContent
                            = select.querySelector('label.selected').textContent;
                        select.querySelector('.stylable-select-options').classList.add('hidden');
                    }
                });
            }
            getValueAndText() {
                const
                    out = document.querySelector(this.selector).querySelector('.stylable-select-out'),
                    text = out.querySelector('span').textContent,
                    value = out.querySelector('input').value;
                return { value: value, text: text };
            }
        }
        aStylableSelect = new StylableSelect('#select1');
        document.getElementById('btn-out-val').addEventListener('click', event => {
            console.log(aStylableSelect.getValueAndText());
        });
    </script>
</body>

</html>

Alles anzeigen

Funktioniert sehr gut aber es wurde der Einwand laut, dass es aus dem Gesichtspunkt der Zugänglichkeit nicht optimal ist. Wie beurteilen das die Experten für dieses Thema?

Beste Grüße, Ulrich

Sempervivum

Immer gern! Ich wünsche noch einen schönen Abend!

Sempervivum

Ich habe zunächst mal im Seiteninspektor provisorisch den Zeilenabstand kräftig erhöht, damit das Scrolling aktiv wird:

Code

.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr 8fr 3fr;
    gap: 1em;
    row-gap: 10vh;
}

Dann für .modal-content die Höhe begrenzt, ebenfalls, damit das Scrolling greift, und die Elemente mit Flex angeordnet:

Code

.modal-content {
    /* hier drüber wie bisher */
    height: 70vh;
    display: flex;
    flex-direction: column;
}

Und für .modal-body das Scrollen eingeschaltet durch overflow: auto;

Code

.modal-body {
    padding: 2px 16px;
    flex: 1;
    overflow: auto;
}

Versuche mal ob dich das weiter bringt.

Sempervivum

Im wesentlichen funktioniert das Scrolling ja, aber die Details ...

Stell das doch mal online, das hier https://my2.emess62.de ist keine Version mit Scrolling.

Sempervivum

Zitat

Doch wie kann ich in der Mobil Ansicht mein gesamtes Modal lesen?

Wie meinst Du das? Klappt es mit dem Scrolling noch nicht, wenn der Inhalt höher als das Browserfenster wird?

Sempervivum

... getestet und funktioniert perfekt. Wieder etwas gelernt, vielen Dank für diesen Hinweis!

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.

Sempervivum

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();
        });

Sempervivum

Für mich ist es erst Mal spät genug für heute, ich sehe mir das morgen an.

Gute Nacht!

Sempervivum

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.

Sempervivum

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.

Sempervivum

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

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

Alles anzeigen

Und mit diesem CSS kannst Du die Elemente vierspaltig anordnen:

Code

        .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;
            }
        }

Alles anzeigen

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.

Sempervivum

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.

Sempervivum

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.

Sempervivum

Ja, die Beschreibung scheint auch ziemlich gut zu sein, eben so wie einiges anderes auf kulturbanause.de.

Sempervivum

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.

Beiträge von Sempervivum

Ersatz für select, damit es sich stylen lässt. Zugänglichkeit?

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Ersatz für select, damit es sich stylen lässt. Zugänglichkeit?

Ersatz für select, damit es sich stylen lässt. Zugänglichkeit?

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid

Modale von Bootstrap zur Flexbox und von table zu grid