input-group-lg and input-group-sm override validation icon padding

[tmorehouse]

Version 4.4.1 (and possibly before) Haven't tested in v5 yet.

When using .is-valid or .is-invalid on a .form-control in an .input-group-lg or .input-group-sm, the right padding added to accommodate for the validation icon is reset to the input group form-control default padding (non-validated), causing long text to overlap the validation icon.

As you can see in the following image, Medium (the default input-group size) has the correct righthand padding, while the small and large input-groups do not have the correct padding to accommodate for the validation icon.

[tmorehouse]

@mdo Perhaps the solution could be just as simple as adding an !important flag in bootstrap/scss/mixins/_forms.scss (v4-dev branch) at line 80:

bootstrap/scss/mixins/_forms.scss

Lines 75 to 92 in fbf294a

	.form-control {
	@include form-validation-state-selector($state) {
	border-color: $color;
	@if $enable-validation-icons {
	padding-right: $input-height-inner;
	background-image: escape-svg($icon);
	background-repeat: no-repeat;
	background-position: right $input-height-inner-quarter center;
	background-size: $input-height-inner-half $input-height-inner-half;
	}
	&:focus {
	border-color: $color;
	box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
	}
	}
	}

 .form-control { 
   @include form-validation-state-selector($state) { 
     border-color: $color; 
  
     @if $enable-validation-icons { 
       padding-right: $input-height-inner !important;
       // ...
     }

[hirayama-onagigawa-computing]

+1
I've just met the same situation.
https://jsfiddle.net/hirayama_onagigawa/xt70amuh/30/

[pricop]

+1

I'm in the same boat. Small & Large form don't get the padding treatment the regular inputs get. The solution seems to be working fine at first glance.

[ffoodd]

I reproduced this on v4. After testing on v5, it's not affected only because validation styles come after input groups—which is not the case in v4.

@twbs/css-review Not quite sure about the way to go with this:

1. separate form validation styles in a later imported partial?
2. moving input-group up in the imports?
3. bumping specificity for this padding, either by using !important or adding another piece in the selector?

Any thought?

[stefanmo]

Any fix planned for this?

[ffoodd]

Ping @twbs/css-review again :)
!important is easy enough, I don't expect any regression. We may avoid it by moving things as I mentionned, but would probably be a breaking change.

[ffoodd]

Just updated my reduced test case to cover more things, and opened a PR to discuss this.

[XhmikosR]

Should be fixed by #32968.