[Vuejs]-Vue component (vue-flatpickr-component) rendering outside <div id="app">

by

0👍

Just fixed something similar on our project.

Seems like the static option from the flat-pickr documentation will do the trick here, assuming the styling is setup to override flat-pickr’s default.

Position the calendar inside the wrapper and next to the input
element. * Attaching the calendar to a specific element makes it
depend on that element’s position and style. If the calendar is not
positioned as expected, check the CSS rules of the container.

Set that as a config option where the flat-pickr component is brought in:

<flat-pickr :config="config" v-model="date"></flat-pickr>

then define the config option within the data variables like:

data: function () {
    return {
      config: {
        static: true,
      },

Leave a comment