Datepicker styling is broken (wrong width?) #5210
Comments
|
Try upgrading to BootstrapVue version 2.12.0, which has some fixes for Datepicker styles. It sounds like you might have customized padding/margin SCSS variables (the base Related issue: #5117 Also note that there is a |
Thank you tmorehouse, I updated to 2.12.0 and used calendar-width property. It works fine now. However after update the field itself started looking weird (icon is below the field, field is bigger than others). It happened just after update. How to fix it? |
By the way, I did not touch $spacer value at all. |
|
Make sure you are using the latest BootstrapVue v2.12.0 CSS as well (and that it is included after Bootstrap v4.4 CSS is imported). |
I'm thankful, it worked! |
|
put in main.js : |
Uh oh!
There was an error while loading. Please reload this page.
Describe the bug
In our project we are trying to use datepicker but it keeps having broken layout. Please see the screenshots attached for details. Increasing style width of the element with id: "_BVID__73__calendar-wrapper" seems to be solving the issue but it can't be done via Vue code without dirty hacks.
Steps to reproduce the bug
Add a datepicker vue component to your view.
<b-form-group label="Date of Birth" label-for="edit-input-dateofbirth" class="mr-2"> <b-form-datepicker id="edit-input-dateofbirth" v-model="form.dateOfBirth" ></b-form-datepicker> </b-form-group>Expected behavior
Layout supposed to be correct (like in examples)
Versions
Libraries:
Environment:
Additional context
I'm attaching the screenshots with details:
The text was updated successfully, but these errors were encountered: