search

Vuepic / vue-datepicker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
1.44k stars 143 forks source link

presetRange causes unexpected width growth and breaks UI #494

Closed frankli0324 closed 1 year ago

frankli0324 commented 1 year ago

Describe the bug

When enabling preset-range or left/right-sidebar, if the width of the added sidebars is small enough, this would happen: 20230719114303_rec_

the reason is that https://github.com/Vuepic/vue-datepicker/blob/main/src/VueDatePicker/components/DatepickerMenu.vue#L248-L251 the calendar width is only calculated when neither presetRanges or sidebars is enabled, and https://github.com/Vuepic/vue-datepicker/blob/main/src/VueDatePicker/components/ActionRow.vue#L2 relies on this value to calculate the overflow:hidden behavior

Expected behavior

the calendar width should always been set, is there any reason it's not set?

Desktop & mobile (please complete the following information):

https://stackblitz.com/edit/vue-e4mx9u

frankli0324 commented 1 year ago

the only temporary "fix" for this I can think of is only setting display: none on selection preview (:action-row="{ showNow: true, showPreview: false }"), since the width is dynamically calculated. unless someone want's to document.querySelector in vue...

Jasenkoo commented 1 year ago

The fix is included in the released v6