Closed gensart-ai closed 2 years ago
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.
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:
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):
Smartphone (please complete the following information):