[BUG] - Notiflix.Block on Button with btn-sm

[Genesaret Johnes]

Describe the bug

I need to apply some of Notiflix.Block on my button with btn-sm (by bootstrap 4) but when it clicked it shows but adds some vertical margins or something like that. I've tried svgSize option to minimize it but just the icon getting small but the margin still. Maybe is it just me or a bug idk. thankyou

Source Code

html
<button type="submit" id="productSubmitButton" class="btn btn-sm bg-teal"> <i class="fas fa-plus"></i> Add </button>

js
Notiflix.Block.init({ svgSize: '20px', position: 'absolute' }); Notiflix.Block.standard('#productSubmitButton'); // something happens here Notiflix.Block.remove('#productSubmitButton');

To Reproduce

Steps to reproduce the behavior:

1. Click the button
2. See error

Expected behavior

Size of button still same as before.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser: Edge, Firefox, Safari
• Version: 103.0.1264.44 (Official build) (64-bit)

Smartphone (please complete the following information):

• Device : -
• OS : -
• Browser : -
• Version : -

[Furkan]

Hello @gensart-ai,

The Block module is adding at least 40px + (svgSize * 1.25)px as a minimum height to the element that we are willing to block.
This is our formula: Math.round(parseInt(options.svgSize) * 1.25) + 40

Because I did not design this module to block these kinds of small elements, like buttons, icons, etc...

As a solution, you can add a minimum height property to your button CSS. The size can be the button size that you have from Bootstrap4, or it can be auto, it is up to you. Also, you can consider blocking the wrapper element, which is the white box in your example.

#productSubmitButton {
    min-height: auto !important;
}

Thanks,
Furkan.