Date picker does not expanded over parent div component

Question

I am using vuexy admin dashboard template in my Vue.js project and I am using the date picker component inside the collapse component provided by vuexy theme. when I click on date picker it should expand over the parent but it did not work as the following screenshot.

I tried to override the inner class of date pickers expandable component and make it to use position: fixed; then the expandable part is visible but it stays at the same position when we scroll as the following screenshot.

How can I fix this issue using CSS? (or even library-specific solution also acceptable)

Answer 1

Just use the teleport attribute

<template>
    <VueDatePicker v-model="date" :teleport="true" />
</template>

<script setup>
import { ref } from 'vue';

const date = ref(new Date());
</script>

vue3datepicker.com/props/positioning/#teleport