rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

Fix left alignment of floating labels with .form-select size variants (#41013)
Some checks failed
BrowserStack / browserstack (push) Has been cancelled
Details
Bundlewatch / bundlewatch (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details
cspell / cspell (push) Has been cancelled
Details
CSS / css (push) Has been cancelled
Details
Docs / docs (push) Has been cancelled
Details
JS Tests / JS Tests (push) Has been cancelled
Details
Lint / lint (push) Has been cancelled
Details
CSS (node-sass) / css (push) Has been cancelled
Details
Release notes / update_release_draft (push) Has been cancelled
Details

Browse Source 
Co-authored-by: Patrick Kroog <pk@kroog.com>
Co-authored-by: Christian Oliff <christianoliff@pm.me>
Co-authored-by: Julien Déramond <juderamond@gmail.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
This commit is contained in:
Patrick (Casus Belli) 2024-11-14 11:12:33 +01:00 committed by GitHub
parent f9b32bc3de
commit cacbdc680e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
js/tests/visual/floating-label.html
View File

@ -167,6 +167,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
<label for="floatingPlaintextInput1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
</div>
<!--Compare form-select rendering depending on the size-->
<div class="form-floating">
<select class="form-select" id="floatingSelectRegular" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectRegular">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-sm" id="floatingSelectSmall" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectSmall">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-lg" id="floatingSelectLarge" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectLarge">Works with selects</label>
</div>
</div>
<div class="container-fluid bg-body" data-bs-theme="dark">
@ -329,6 +357,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="name@example.com" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.">
<label for="floatingPlaintextInput3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis mi at lobortis rutrum. Phasellus varius a risus non lobortis. Ut id congue enim. Quisque facilisis elit ac elit dapibus aliquet nec sit amet arcu. Morbi vitae ultricies eros. Proin varius augue in tristique pretium. Morbi at ullamcorper elit, at ullamcorper massa. Vivamus suscipit quam quis viverra eleifend.</label>
</div>
<!--Compare form-select rendering depending on the size-->
<div class="form-floating">
<select class="form-select" id="floatingSelectRegularDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectRegularDark">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-sm" id="floatingSelectSmallDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectSmallDark">Works with selects</label>
</div>
<div class="form-floating">
<select class="form-select form-select-lg" id="floatingSelectLargeDark" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectLargeDark">Works with selects</label>
</div>
</div>
</div>

1
scss/forms/_floating-labels.scss
View File

@ -51,6 +51,7 @@
> .form-select {
padding-top: $form-floating-input-padding-t;
padding-bottom: $form-floating-input-padding-b;
padding-left: $form-floating-padding-x;
}
> .form-control:focus,