Skip to content

Commit

Permalink
Hide validation icons from multiple selects
Browse files Browse the repository at this point in the history
Implementation provided in twbs#33411 does not take into account that some
Operating Systems may display a vertical scrollbar in the multiple
select field

This implementation will hide the validation icons from multiple select
fields, just like Bootstrap 4 does.

Fix: twbs#33591
  • Loading branch information
tagliala committed Apr 13, 2021
1 parent db32b23 commit 491095a
Showing 1 changed file with 6 additions and 11 deletions.
17 changes: 6 additions & 11 deletions scss/mixins/_forms.scss
Expand Up @@ -88,17 +88,12 @@
border-color: $color;

@if $enable-validation-icons {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;

&[multiple],
&[size]:not([size="1"]) {
padding-right: $input-height-inner;
background-image: escape-svg($icon);
background-position: top $input-height-inner-quarter right $input-height-inner-quarter;
background-size: $form-select-feedback-icon-size;
&:not([multiple]):not([size]),
&:not([multiple])[size="1"] {
padding-right: $form-select-feedback-icon-padding-end;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
}

Expand Down

0 comments on commit 491095a

Please sign in to comment.