Beiträge von Sempervivum

Sempervivum

Ich hoffe, ich verstehe das richtig: Du willst, so wie in der Section "Über mich" einen weiteren Container einbauen und der soll zentriert sein? In dem Fall hättest Du ja statt des body die Section für die Unterseite und müsstest darin einen weiteren Container, z. B. ein div, einbauen und den zentrieren.

Allerdings kannst Du das dann wahrscheinlich auch, ohne diesen Zusatzcontainer, durch ein einfaches Padding für die Section erreichen (wenn ich an dein Bild oben denke).

Sempervivum

Das ist eine Standardaufgabe und mit Flex sehr einfach zu machen: Du brauchst nur align-items: center; zusätzlich zum display:flex; für body.

Sempervivum

Ich rate mal: Du willst die Section zentrieren, und zwar auch vertikal?

Sempervivum

Zitat

Neugier und Altersspieltrieb

Das war auch bei mir eine Antriebsfeder

Es ist ja so, dass man so gut wie alle HTML-Elemente nach Belieben stylen kann, Farben, Ränder, Schatten, und und und. Das Select macht hier eine Ausnahme und häufig kommt die Frage auf, wie man es denn dort macht. Und es ist häufig so, dass man sich ein einheitliches und individuelles Erscheinungsbild wünscht und auch dabei steht einem dann das Select im Wege. Außerdem ist sein Erscheinungsbild vom Browser abhängig, noch etwas, das häufig unerwünscht ist.

Auch die Browserhersteller haben dieses Problem erkannt, wie Du in Posting #3 sehen kannst. Aber wahrscheinlich wird noch Zeit ins Land gehen, bis das etabliert ist.

Auslöser waren dann zwei Fragen in einem anderen Forum.

Sempervivum

Update:

Bei den Radiobuttons fehlten die Namen, fügt man sie hinzu, kann man problemlos mit den Pfeiltasten navigieren. Allerdings funktioniert das nur, wenn sie nicht durch das Attribute "hidden" unsichtbar gemacht werden sondern durch ein Klasse, die die Breite auf 0 setzt.
Klasse "keep open" hinzu gefügt, diese hält das Select nach Auswahl einer Option sichtbar.
Eventlistener nicht für window sondern für das aktuelle Select.

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 {
            height: 0;
            overflow: hidden;
        }

        stylable-select input[type="radio"].hidden {
            width: 0;
            overflow: hidden;
        }

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

        /* Sample for 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>
    <script>
        class StylableSelect extends HTMLElement {
            constructor() {
                super();
            }
            connectedCallback() {
                this.addEventListener('click', event => {
                    // Was the head of the select clicked?
                    if (event.target.tagName.toLowerCase() == 'stylable-select-out') {
                        // Give focus to the checked radiobutton again
                        const
                            rbChecked = this.querySelector('input[type="radio"]:checked')
                        if (rbChecked) rbChecked.focus();

                        /* Toggle visibility of options */
                        this.querySelector('stylable-select-options')
                            .classList.toggle('hidden');
                    }
                    // Check if the clicked element is an option
                    // (only options have a label)
                    const
                        lbl = event.target.closest('label');
                    if (lbl) {
                        // Remove class "selected" at that label,
                        // that had it previously
                        const
                            selectedLabel = this.querySelector('label.selected');
                        if (selectedLabel) selectedLabel.classList.remove('selected');

                        // Add class "selected" at clicked label
                        lbl.classList.add('selected');

                        // Transfer text to output
                        this.querySelector('stylable-select-out span').textContent
                            = this.querySelector('label.selected').textContent;
                        if (!this.classList.contains('keep-open')) {
                            this.querySelector('stylable-select-options').classList.add('hidden');
                        }

                        // Give focus to clicked radio button
                        lbl.querySelector('input').focus();
                    }
                });
            }
            getValueAndText() {
                const
                    out = this.querySelector('stylable-select-out'),
                    text = out.querySelector('span').textContent,
                    value = this.querySelector('input:checked').value;
                return { value: value, text: text };
            }
        }
        customElements.define("stylable-select", StylableSelect);
    </script>
</head>

<body>
    <button id="btn-out-val-1">Output Value 1</button>
    <button id="btn-out-val-2">Output Value 1</button>

    <!-- Begin stylable select -->
    <!-- Modify ID -->
    <stylable-select id="select1">
        <stylable-select-out>
            <span>Select an option</span>
        </stylable-select-out>
        <stylable-select-options class="hidden">
            <!-- Modify options or labels containing radio buttons -->
            <label><input type="radio" name="select1-rb" value="opt11" class="hidden">Option 1-1</label>
            <label><input type="radio" name="select1-rb" value="opt12" class="hidden">Option 1-2</label>
            <label><input type="radio" name="select1-rb" value="opt13" class="hidden">Option 1-3</label>
            <label><input type="radio" name="select1-rb" value="opt14" class="hidden">Option 1-4</label>
        </stylable-select-options>
    </stylable-select>
    <!-- End stylable select -->

    <!-- Begin stylable select -->
    <!-- Modify ID -->
    <stylable-select id="select2" class="keep-open">
        <stylable-select-out>
            <span>Select an option</span>
        </stylable-select-out>
        <stylable-select-options class="hidden">
            <!-- Modify options or labels containing radio buttons -->
            <label><input type="radio" name="select2-rb" value="opt21" class="hidden">Option 2-1</label>
            <label><input type="radio" name="select2-rb" value="opt22" class="hidden">Option 2-2</label>
            <label><input type="radio" name="select2-rb" value="opt23" class="hidden">Option 2-3</label>
            <label><input type="radio" name="select2-rb" value="opt24" class="hidden">Option 2-4</label>
        </stylable-select-options>
    </stylable-select>
    <!-- End stylable select -->

    <script>
        document.getElementById('btn-out-val-1').addEventListener('click', event => {
            console.log(document.getElementById('select1').getValueAndText());
        });
        document.getElementById('btn-out-val-2').addEventListener('click', event => {
            console.log(document.getElementById('select2').getValueAndText());
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

PS: Das mit den Hoch- und Runterpfeilen würde in die Rubrik "Zugänglichkeit" fallen, nicht wahr?

Sempervivum

Ich habe das jetzt auf Custom-Elemente und connectedCallback umgestellt.

Funktioniert einwandfrei und das JS ist sogar ein wenig einfacher geworden.

Cool was man so alles machen und lernen kann.

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>
    <script>
        class StylableSelect extends HTMLElement {
            constructor() {
                // Always call super first in constructor
                super();
            }
            connectedCallback() {
                window.addEventListener('click', event => {
                    // Prüfen ob das geklickte Element ein Kind dieses Elementes ist */
                    const
                        select = event.target.closest('stylable-select');
                    if (select == this) {
                        /* Wurde der Kopf des Selects geklickt? */
                        if (event.target.tagName.toLowerCase() == 'stylable-select-out') {
                            /* Sichtbarkeit der Optionen umschalten */
                            this.querySelector('stylable-select-options')
                                .classList.toggle('hidden');
                        }
                        // Prüfen ob das geklickte Element eine Option ist
                        // (nur die Optionen haben ein Label)
                        const
                            lbl = event.target.closest('label');
                        if (lbl) {
                            // Klasse "selected" löschen bei dem Label,
                            // das sie bisher hatte
                            const
                                selectedLabel = this.querySelector('label.selected');
                            if (selectedLabel) selectedLabel.classList.remove('selected');

                            // Beim geklickten Label die Klasse "selected" hinzu fügen
                            lbl.classList.add('selected');

                            // Wert und Text in die Ausgabefelder übertragen
                            this.querySelector('input[name]').value
                                = this.querySelector('label.selected input').value;
                            this.querySelector('stylable-select-out span').textContent
                                = this.querySelector('label.selected').textContent;
                            this.querySelector('stylable-select-options').classList.add('hidden');
                        }
                    }
                });
            }
            getValueAndText() {
                const
                    out = this.querySelector('stylable-select-out'),
                    text = out.querySelector('span').textContent,
                    value = out.querySelector('input').value;
                return { value: value, text: text };
            }
        }
        customElements.define("stylable-select", StylableSelect);
    </script>
</head>

<body>
    <button id="btn-out-val-1">Output Value 1</button>
    <button id="btn-out-val-2">Output Value 1</button>
    <!-- Begin stylable select -->
    <!-- Modify ID -->
    <stylable-select id="select1">
        <stylable-select-out>
            <span>Select an option</span>
            <!-- Modify name of input -->
            <input name="select1" value="" hidden>
        </stylable-select-out>
        <stylable-select-options class="hidden">
            <!-- Modify options or labels containing radio buttons -->
            <label><input type="radio" value="opt11" hidden>Option 1-1</label>
            <label><input type="radio" value="opt12" hidden>Option 1-2</label>
            <label><input type="radio" value="opt13" hidden>Option 1-3</label>
            <label><input type="radio" value="opt14" hidden>Option 1-4</label>
        </stylable-select-options>
    </stylable-select>
    <!-- End stylable select -->
    <!-- Begin stylable select -->
    <!-- Modify ID -->
    <stylable-select id="select2">
        <stylable-select-out>
            <span>Select an option</span>
            <!-- Modify name of input -->
            <input name="select2" value="" hidden>
        </stylable-select-out>
        <stylable-select-options class="hidden">
            <!-- Modify options or labels containing radio buttons -->
            <label><input type="radio" value="opt21" hidden>Option 2-1</label>
            <label><input type="radio" value="opt22" hidden>Option 2-2</label>
            <label><input type="radio" value="opt23" hidden>Option 2-3</label>
            <label><input type="radio" value="opt24" hidden>Option 2-4</label>
        </stylable-select-options>
    </stylable-select>
    <!-- End stylable select -->
    <script>
        document.getElementById('btn-out-val-1').addEventListener('click', event => {
            console.log(document.getElementById('select1').getValueAndText());
        });
        document.getElementById('btn-out-val-2').addEventListener('click', event => {
            console.log(document.getElementById('select2').getValueAndText());
        });
    </script>
</body>

</html>

Alles anzeigen

Sempervivum

Danke für die Hinweise, ein Custom-Element mit den Callbacks scheint eine coole Sache zu sein, das werde ich mal austesten.

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

Beiträge von Sempervivum

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section

Ausrichten von containern und boxen in einer section

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

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

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

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

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

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