Incorrect validation icon padding

[buismaarten]

Since I've updated to Bootstrap 4.3, the validation icon is not correct aligned. The icon is too much aligned to the right side.

[jacobmllr95]

@buismaarten Can you create a demo on CodePen, CodeSandbox or JSFiddle to confirm that this is directly related to BootstrapVue or if it is an issue with Bootstrap itself.

[tmorehouse]

Looking at the Bootstrap V4.3 docs I can see that the padding appears correctly:

But it is not padding that positions the validation icon, it is background image positioning.

[tmorehouse]

Looking at the custom SCSS we have for form-input, it only applies to type color and custom ranges.

It might be something in the docs CSS that may be affecting this (docs only?)

[mosinve]

I checked BV docs site, and it seems to show icons correct way

[mosinve]

So @buismaarten, please provide us your example, that reproduce the issue, to continue further investigations :)

[buismaarten]

I've done some more research.

This problem only applies when I run npm run prod (yes, I'm using Laravel Mix)
This builds the CSS for production usage.

So I think the problem is not with bootstrap-vue. I thought this because I recently updated some packages related to Bootstrap and since then I have this problem.

[tmorehouse]

It appears to be only affecting DOCs site... pasting code into playground (see issue) and exporting to JS Fiddle it works fine (no issue).

[tmorehouse]

In the docs site the validation icon positioning is:

background-position: 100% calc(.375em + .1875rem);

But in source, it is:

background-position: center right calc(.375em + .1875rem);

Something is changing this during docs generation (prod, not dev).

[buismaarten]

Yes, I have noticed the same on my environment.

Could this problem be with Webpack or something?

[tmorehouse]

Nuxt.JS uses cssnano for post CSS processing/minification. So it might be related to cssnano/cssnano#701

[tmorehouse]

changing the bootstrap CSS from:

background-position: center right calc(0.375em + 0.1875rem);

to:

background-position: right calc(0.375em + 0.1875rem) center;

fixes the issue.

Not sure if it is a cssnano issue, or if it is a bootstrap issue.

Based on MDN, this fix appears to be a preferred order.

[tmorehouse]

Opened a new issue at cssnano: cssnano/cssnano#712

as it is confirmed that it is indeed a cssnano bug.