CODEWITHSUNDEEP
vue.jselement-ui
user16793104
user16793104

Reputation: 65

Element UI date Picker CSS design doesn't change in Vue CLI project

I would like to change some styeles of Element UI date picker. for example, the popup is too far to the left, so I would like to move right a little.

I reference the original site and tried to adapt the code, however the style doesn't change. https://element-plus.org/en-US/component/date-picker.html#attributes

enter image description here

My code like this:

<template>

<el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="〜"
start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts"
popper-class="my-popover" />

</template>

<style lang="scss" scoped>
  ::deep(.my-popover) {
    padding: 1000px 30px;
    background-color: #03cfb4;
    left:  1000px !important;
  }
</style>

Are there any misunderstandings of my code and the solutions? Thank you in advance!

my-popover is added like this: enter image description here

Upvotes: 1

Views: 1317

Answers (1)

user16793104
user16793104

Reputation: 65

I specified the following and it worked!

<template>

<el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="〜"
start-placeholder="Start date" end-placeholder="End date" :shortcuts="shortcuts"
popper-class="my-popover" />

</template>

<style lang="scss">
.my-popover {
  left: 250px !important;
}
</style>

Upvotes: 2

Related Questions