Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/issues/6172 below:

B-Datepicker in Button-Only has 1x500px label · Issue #6172 · bootstrap-vue/bootstrap-vue · GitHub

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:

1. Add a b-datepicker towards the bottom of the page in button-only mode
2. See vertical scrollbar
3. Open Inspector
4. See invisible label spanning downwards

The label should not have h-auto and sr-only at the same time

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)

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;
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4