@@ebody > Ich glaube, ich habe die Lösung. Ich musste dem Elternelement des Button nur eine feste Breite geben. > `<div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px">` Wozu `text-align:center`? Wenn man einen Pakt mit dem Teufel (Bootstrap) schließt, muss man auch nach seinen Regeln spielen. Der (Un)sinn von Bootstrap ist es, präsentationsbezogene Klassen zu verwenden. Zum [Zentrieren von Text](https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment): `text-center`. Mir scheint aber, du brauchst das gar nicht. Zentriert oder nicht – ich sehe da keinen Unterschied. --- Zu deinem Bootstrap-Problem hast du aber noch HTML/CSS-Probleme: > ~~~ html, bad > <div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px"> > <input type="checkbox" id="btncheck" name="btncheck"> > <label class="btn btn-primary" for="btncheck"><i class="fas fa-arrow-alt-circle-right p-1"></i></label> > </div> > <div class="col"> > <input type="search" placeholder="Search..." class="form-control form-control-lg"> > </div> > ~~~ Den Eingabefeldern fehlt die (zugängliche!) Beschriftung. [Placeholder sind keine Label](https://forum.selfhtml.org/self/2019/apr/29/problem-mit-script/1749537#fn1) – [wirklich nicht](https://forum.selfhtml.org/self/2019/jul/31/javascript-text-aus-nextsibling-auslesen/1754570#m1754570). Du kannst daraus `<input type="search" aria-label="Search" class="form-control form-control-lg">`{:.language-html} machen, wenn du keine visuell sichtbare Beschriftung über oder neben dem Eingabefeld willst. Und evtl. durch ein Lupensymbol visualisieren, dass es sich um das Suchfeld handelt. Vorausgesetzt, deine Seite ist auf englisch. Bei einer deutschen Seite müsste es `aria-label="Suche"` heißen. Mit `<label class="btn btn-primary" for="btncheck">`{:.language-html} hast du zwar löblicherweise das `label` mit dem zugehörigen `input` verknüpft, darin befindet sich aber nur ein leeres `i`-Element, also kein hilfreicher Text. Dieser wäre auch mit `aria-label` hinzuzufügen oder (bevorzugt) in einem [visuell versteckten](https://www.a11yproject.com/posts/how-to-hide-content/) Element untezubringen. Bootstrap hat dafür eine [Helferklasse `visually-hidden`](https://getbootstrap.com/docs/5.0/helpers/visually-hidden/), die schon die nötigen Styles hat. > ~~~ css,bad > #searchbar input[type="checkbox"]{ > display: none; > } > ~~~ Nein, das geht so nicht. `display: none` nimmt (wie auch `visibility: hidden`) das Element aus dem *accessibility tree*{:@en}, d.h. es ist per Tastatur und assistiven Technologien gar nicht mehr zu bedienen. Da hilft es auch nicht, dass das Label sichtbar ist. Interaktive Elemente dürfen nie mit `display: none` oder `visibility: hidden` versteckt werden, sondern nur visuell versteckt – wie oben angesprochen. Aber wozu soll die Checkbox da überhaupt gut sein? Mir scheint, du willst da gar keine Checkbox, sondern einen Submit-Button? 😷 LLAP -- *„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“* — Joachim Gauck über Impfgegner

@@ebody > Ich glaube, ich habe die Lösung. Ich musste dem Elternelement des Button nur eine feste Breite geben. > `<div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px">` Wozu `text-align:center`? Wenn man einen Pakt mit dem Teufel (Bootstrap) schließt, muss man auch nach seinen Regeln spielen. Der (Un)sinn von Bootstrap ist es, präsentationsbezogene Klassen zu verwenden. Zum [Zentrieren von Text](https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment): `text-center`. Mir scheint aber, du brauchst das gar nicht. Zentriert oder nicht – ich sehe da keinen Unterschied. --- Zu deinem Bootstrp-Problem hast du aber noch HTML/CSS-Probleme: > ~~~ html, bad > <div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px"> > <input type="checkbox" id="btncheck" name="btncheck"> > <label class="btn btn-primary" for="btncheck"><i class="fas fa-arrow-alt-circle-right p-1"></i></label> > </div> > <div class="col"> > <input type="search" placeholder="Search..." class="form-control form-control-lg"> > </div> > ~~~ Den Eingabefeldern fehlt die (zugängliche!) Beschriftung. [Placeholder sind keine Label](https://forum.selfhtml.org/self/2019/apr/29/problem-mit-script/1749537#fn1) – [wirklich nicht](https://forum.selfhtml.org/self/2019/jul/31/javascript-text-aus-nextsibling-auslesen/1754570#m1754570). Du kannst daraus `<input type="search" aria-label="Search" class="form-control form-control-lg">`{:.language-html} machen, wenn du keine visuell sichtbare Beschriftung über oder neben dem Eingabefeld willst. Und evtl. durch ein Lupensymbol visualisieren, dass es sich um das Suchfeld handelt. Vorausgesetzt, deine Seite ist auf englisch. Bei einer deutschen Seite müsste es `aria-label="Suche"` heißen. Mit `<label class="btn btn-primary" for="btncheck">`{:.language-html} hast du zwar löblicherweise das `label` mit dem zugehörigen `input` verknüpft, darin befindet sich aber nur ein leeres `i`-Element, also kein hilfreicher Text. Dieser wäre auch mit `aria-label` hinzuzufügen oder (bevorzugt) in einem [visuell versteckten](https://www.a11yproject.com/posts/how-to-hide-content/) Element untezubringen. Bootstrap hat dafür eine [Helferklasse `visually-hidden`](https://getbootstrap.com/docs/5.0/helpers/visually-hidden/), die schon die nötigen Styles hat. > ~~~ css,bad > #searchbar input[type="checkbox"]{ > display: none; > } > ~~~ Nein, das geht so nicht. `display: none` nimmt (wie auch `visibility: hidden`) das Element aus dem *accessibility tree*{:@en}, d.h. es ist per Tastatur aud assistiven Technologien gar nicht mehr zu bedienen. Da hilf es auch nicht, dass das Label sichtbar ist. Interaktive Elemente dürfen nie mit `display: none` oder `visibility: hidden` versteckt werden, sondern nur visuell versteckt – wie oben angesprochen. Aber wozu soll die Checkbox da überhaupt gut sein? Mir scheint, du willst da gar keine Checkbox, sondern einen Submit-Button? 😷 LLAP -- *„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“* — Joachim Gauck über Impfgegner

@@ebody > Ich glaube, ich habe die Lösung. Ich musste dem Elternelement des Button nur eine feste Breite geben. > `<div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px">` Wozu `text-align:center`? Wenn man einen Pakt mit dem Teufel (Bootstrap) schließt, muss man auch nach seinen Regeln spielen. Der (Un)sinn von Bootstrap ist es, präsentationsbezogene Klassen zu verwenden. Zum [Zentrieren von Text](https://getbootstrap.com/docs/5.0/utilities/text/#text-alignment): `text-center`. --- Zu deinem Bootstrp-Problem hast du aber noch HTML/CSS-Probleme: > ~~~ html, bad > <div class="col-sm-2 col-md-1 col-lg-1" style="text-align:center; width: 75px"> > <input type="checkbox" id="btncheck" name="btncheck"> > <label class="btn btn-primary" for="btncheck"><i class="fas fa-arrow-alt-circle-right p-1"></i></label> > </div> > <div class="col"> > <input type="search" placeholder="Search..." class="form-control form-control-lg"> > </div> > ~~~ Den Eingabefeldern fehlt die (zugängliche!) Beschriftung. [Placeholder sind keine Label](https://forum.selfhtml.org/self/2019/apr/29/problem-mit-script/1749537#fn1) – [wirklich nicht](https://forum.selfhtml.org/self/2019/jul/31/javascript-text-aus-nextsibling-auslesen/1754570#m1754570). Du kannst daraus `<input type="search" aria-label="Search" class="form-control form-control-lg">`{:.language-html} machen, wenn du keine visuell sichtbare Beschriftung über oder neben dem Eingabefeld willst. Und evtl. durch ein Lupensymbol visualisieren, dass es sich um das Suchfeld handelt. Vorausgesetzt, deine Seite ist auf englisch. Bei einer deutschen Seite müsste es `aria-label="Suche"` heißen. Mit `<label class="btn btn-primary" for="btncheck">`{:.language-html} hast du zwar löblicherweise das `label` mit dem zugehörigen `input` verknüpft, darin befindet sich aber nur ein leeres `i`-Element, also kein hilfreicher Text. Dieser wäre auch mit `aria-label` hinzuzufügen oder (bevorzugt) in einem [visuell versteckten](https://www.a11yproject.com/posts/how-to-hide-content/) Element untezubringen. Bootstrap hat dafür eine [Helferklasse `visually-hidden`](https://getbootstrap.com/docs/5.0/helpers/visually-hidden/), die schon die nötigen Styles hat. > ~~~ css,bad > #searchbar input[type="checkbox"]{ > display: none; > } > ~~~ Nein, das geht so nicht. `display: none` nimmt (wie auch `visibility: hidden`) das Element aus dem *accessibility tree*{:@en}, d.h. es ist per Tastatur aud assistiven Technologien gar nicht mehr zu bedienen. Da hilf es auch nicht, dass das Label sichtbar ist. Interaktive Elemente dürfen nie mit `display: none` oder `visibility: hidden` versteckt werden, sondern nur visuell versteckt – wie oben angesprochen. Aber wozu soll die Checkbox da überhaupt gut sein? Mir scheint, du willst da gar keine Checkbox, sondern einen Submit-Button? 😷 LLAP -- *„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“* — Joachim Gauck über Impfgegner