input-group-lg and input-group-sm override validation icon padding
Created by: 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.