0

I got some problems with overriding the CSS on slots inside an autocomplete. I read this thread and tried multiple solutions, but none work that are feasible (since they globally change the style for vuetify components): How to override vuetify styles?

How would I override the autocomplete styles? E.g right now my problem is that I'm adding an append-slot with a button inside the search field, but the padding of the text field pushes it too much to the left & no padding is applied on the bottom.

enter image description here

Some things I tried: Creating a parent element with an ID and then manually trying to create a class for it.

Example:

#handlesearch > div > div > div.v-input__slot > div.v-select__slot > div {
  margin-top: 4px !important;
}


     <template id="handlesearch" slot="append">
       <v-btn
      >Sök</v-btn
     >
   </template>
Abhinav Kumar
  • 2,883
  • 1
  • 17
  • 30
Thorvald
  • 546
  • 6
  • 18
  • 1
    I was facing the same problem, overriding slots or any other component css is not generally possible in the scoped css. I ended up writing global css for that specific component based on parent selector (so it applied only on that one) – Abhinav Kumar Oct 20 '21 at 12:18
  • I guess that's a reasonable solution since it indeed does solve my problem even if it's not optimal. However, this is more of a Vuetify inherent problem so I'll accept it:) Thanks! – Thorvald Oct 21 '21 at 10:34

1 Answers1

0

If you inspect your html, you'll notice that adding ID on <template> is not working. If you move your id="handlesearch" to actual html element inside your slot, which is in this case v-btn.

<template slot="append">
    <v-btn id="handlesearch">Sök</v-btn>
</template>

with next scoped style

<style scoped>
    #handlesearch {
      background: red;
    }
</style>

Produces next result:

Visual example

If I move id="handlesearch" to <template> as <template id="handlesearch"> style will not be applied since in my DOM there is no HTML element with that id.

Solution

Move your ID to actual element inside your slot, and add scoped style according to that.

maki000
  • 339
  • 1
  • 8