search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.42k stars 864 forks source link

Duplicate arrow on the time picker #890

Open jtalbourdet opened 3 years ago

jtalbourdet commented 3 years ago

I notice a problem with the timepicker dropdown, the arrow is displayed twice

Version: 3.0.0-alpha.4

image "devDependencies": { "@inertiajs/inertia": "^0.8.4", "@inertiajs/inertia-vue3": "^0.3.5", "@inertiajs/progress": "^0.2.4", "@tailwindcss/forms": "^0.2.1", "@tailwindcss/typography": "^0.3.0", "@vue/compiler-sfc": "^3.0.5", "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14", "postcss-import": "^12.0.1", "tailwindcss": "^2.0.1", "vue": "^3.0.5", "vue-loader": "^16.1.2" }, "dependencies": { "v-calendar": "^3.0.0-alpha.4", "vue-tailwind": "^2.2.1" }

jwoertink commented 3 years ago

I'm seeing this too. My guess is a compatibility with Tailwind.

Screen Shot 2021-11-08 at 3 02 57 PM

but it only seems to happen with the light theme

Screen Shot 2021-11-08 at 3 04 47 PM
hanssteg commented 3 years ago

I am having the same issue. Anyone find a resolution yet?

Gian1984 commented 3 years ago
Schermata 2021-11-17 alle 21 56 15

Me too i have the same problem, tailwind + vuejs....does anyone find a solution? i try to find a class generated by the popover and style it with a display none.... i use to ---> !important. But doesn't work.

hanssteg commented 3 years ago

I am trying some things now but have not had any luck. It would be great to figure this out though as there are not really any good time pickers for Vue 3 that I can find...

Gian1984 commented 3 years ago

@hanssteg if you see my picture, i had wanted to change color of the background & try to make identical to the first arrow and after change the color of the text and second arrow.... but i look in the console and there is no id or class or nothing to attach some css ....

hanssteg commented 3 years ago

I was able to get the arrow to disappear by adding this to my css. In my case, tailwind css adds an arrow to select fields

.vc-select select {
  background-image: none;
}
Gian1984 commented 3 years ago

@hanssteg top!!!! Thanks you!