Skip to content

Commit

Permalink
Fix left alignment of floating labels with .form-select size varian…
Browse files Browse the repository at this point in the history 
…ts (twbs#41013)

Co-authored-by: Patrick Kroog <[email protected]>
Co-authored-by: Christian Oliff <[email protected]>
Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Louis-Maxime Piton <[email protected]>
  • Loading branch information
@patrickzzz @coliff
@julien-deramond @louismaximepiton @patrickhlauke
5 people authored and patrickhlauke committed Dec 10, 2024
1 parent 8f8ac5b commit 0304f82
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 0 deletions.
56 changes: 56 additions & 0 deletions js/tests/visual/floating-label.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput1" placeholder="[email protected]" 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">
Expand Down Expand Up @@ -329,6 +357,34 @@
<input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput3" placeholder="[email protected]" 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>

Expand Down
1 change: 1 addition & 0 deletions scss/forms/_floating-labels.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit 0304f82

Please sign in to comment.