search

Vuepic / vue3-date-time-picker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
158 stars 13 forks source link

Date picker pop up gets offset when modal is used inside table row #17

Closed moreorover closed 2 years ago

moreorover commented 2 years ago

Describe the bug I'm building a website using Bulma CSS framework to help me with styles and have come across the issue when using modal component from inside Table cell. When modal component is inside table row the calendar pop up windows gets offset to the left to corner of the window.

To Reproduce Steps to reproduce the behaviour: Clone repo https://github.com/moreorover/vue3-date-time-picker-boiled install dependencies, serve the app, in the home page there is a table, in the first row of the table there is a button to open modal with date picker field inside. Modal opens when button is pressed, press on date picker input field and a calendar pop up window appears at top: 10px, left: 0px

Expected behavior Calendar pop up window expected to appear underneath or above (depending on available space) the input field.

Screenshots https://i.imgur.com/smh6ijp.png

Jasenkoo commented 2 years ago

This is not an issue. You have placed 2 date pickers on the same page. You have one on the first modal, and then the same one in the table. The easiest solution is to pass some unique identifier prop to the modal component and pass it on the date picker as an uid prop. That will solve your problem.

moreorover commented 2 years ago

Thank you. Was not aware of this. This is clear now.

nipunTharuksha commented 2 years ago

@Jasenkoo I think this needs to be added in to documentation props section.

Jasenkoo commented 2 years ago

@nipunTharuksha Starting from the version 2.3.3 this is removed and no longer required for multiple instances, it is added in the changelog.