Description
Describe the bug
When using b-datepicker on its own, with button-only set, the label will have both the sr-only and h-auto classes enabled.
This causes a 1px width, with auto height label, resulting in an invisible 1x500px strip.
When the component is used towards the bottom of a page, this will cause a scrollbar to appear where it is not needed, or wanted.
I've attached an image to demonstrate:
Steps to reproduce the bug
- Add a
b-datepickertowards the bottom of the page inbutton-onlymode - See vertical scrollbar
- Open Inspector
- See invisible label spanning downwards
Expected behaviour
The label should not have h-auto and sr-only at the same time
Versions
Libraries:
- BootstrapVue: 2.20.1
- Bootstrap: 4.5.3
- Vue: 2.6.12
@nuxt/core: 2.14.11
Environment:
- Device: Dell XPS15
- OS: Windows 10
- Browser: Chrome
- Version 87.0.4280.88 (Official Build) (64-bit)
Additional context
I believe the error is here: https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.20.1/src/utils/bv-form-btn-label-control.js#L236
As far as I can tell, it needs to be updated to match: https://github.com/bootstrap-vue/bootstrap-vue/blob/v2.20.1/src/utils/bv-form-btn-label-control.js#L283
However, I have not tested this!
I added a remedial fix with the following css:
.sr-only.h-auto {
height: 1px !important;
}