CODEWITHSUNDEEP
javascriptcssvue.js
Nurzhan Nogerbek
Nurzhan Nogerbek

Reputation: 5246

How to change css style of input element of V-Calendar package?

I need advice. I use V-Calendar package where I want to customize style of input element. I use such code but this method yielded no results.

<template>
    <v-date-picker
        class='date-picker'
        mode='range'
        v-model='range'
        :show-day-popover=false
        is-double-paned
        show-caps>
    </v-date-picker>
</template>

<style scoped>
    .date-picker input{
        display: block !important;
        width: 100% !important;
        color: #495057 !important;
        background-color: #fff !important;
        background-clip: padding-box !important;
        border: 1px solid #ced4da !important;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
        padding: .25rem .5rem !important;
        font-size: .875rem !important;
        line-height: 1.5 !important;
        border-radius: .2rem !important;
    }
</style>

The second question is how to remove this pointer:

enter image description here

Upvotes: 2

Views: 4657

Answers (2)

ittus
ittus

Reputation: 22413

You're using scoped for css, I suggest you using deep selector

.date-picker /deep/ input {
    display: block !important;
    width: 100% !important;
    color: #495057 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid #ced4da !important;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out !important;
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
    border-radius: .2rem !important;
}

Deep selector reference

Upvotes: 3

trinaldi
trinaldi

Reputation: 2950

You'll need to tweak with the .direction-* classes, especially the borders. Checking the hover event you can see that it inserts an element with a class .direction-* -- * meaning: top, left, right and so on. Here's the link from the source, look how it add some pixels depending where the popover is located.

At first, try some !important rules until you find the correct fix. Also you can recompile the file to suit your needs. Don't forget the borders from the .popover-* classes, also located at the link.

It looks like the event add the code inline, so it might be a problem.

Upvotes: 0

Related Questions