search

bootstrap-vue / bootstrap-vue

BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
https://bootstrap-vue.org
MIT License
14.52k stars 1.88k forks source link

Inline Form with datepicker messes up the styles in the popup. #6743

Open BMatous opened 3 years ago

BMatous commented 3 years ago

Describe the bug

Inline Form with datepicker messes up the styles in the popup.

Steps to reproduce the bug

Add an inline form with a datepicker.

Expected behavior

The datepicker looks fine if you take the inline off of the form tag.

Versions

Libraries:

Environment:

Demo link

JSFiddle: https://jsfiddle.net/k5obsn1a/

Hiws commented 3 years ago

Looks like .form-inline causes some issue as it modifies the width of .form-control which is used on some of the elements in the calendar popup.

Will have to specifically add width: 100% !important to overwrite that.

Adding the following CSS should work as a temporary workaround.

.b-calendar output {
    width: 100% !important;
}

.b-calendar .b-calendar-grid {
    width: 100% !important;
}
BMatous commented 3 years ago

Thank you! That fixed it. 😊