Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Datepicker styling is broken (wrong width?)

See original GitHub issue

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:

BootstrapVue: 2.11.0
Bootstrap: 4.4.1
Vue: 2.6.11

Environment:

Device: Mac
OS: macOS Mojave
Browser: Brave
Version: Version 1.4.96 Chromium: 80.0.3987.132 (Official Build) (64-bit)

Additional context

I’m attaching the screenshots with details: calendar-broken incorrect width solution

Issue Analytics

State:
Created 3 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

digitalcortexcommented, Apr 21, 2020

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!

1reaction

tmorehousecommented, Apr 21, 2020

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).

Top Results From Across the Web

Bootstrap Datepicker strange sizing - css - Stack Overflow

The datepicker works fine but for some reason when I click on the month/year "zoom-out" button, the content is squashed into half the...

Handling common HTML and CSS problems - MDN Web Docs

Some problems can be solved by just taking advantage of the natural way in which HTML/CSS work. Unrecognized HTML elements are treated by...

10 Most Common Bootstrap Mistakes That Developers Make

Common Bootstrap Mistake #4: Using everything that Bootstrap offers. As mentioned before, Bootstrap is comprehensive. It offers a lot of UI components, HTML...

DatePicker API - MUI X

Name Type Default onChange * func renderInput * func acceptRegex RegExp /\dap/gi

Custom Date Picker in JavaScript & CSS - YouTube

Learn how to code a completely customizable date picker in JavaScript & CSS. We use the power of js loops, event listeners, CSS...