0

I have a v-autocomplete (vuetify) that expands a list of items

When I click on my autocomplete to type the content that is available in the list of items, the container in which the items are located is out of the position I want, as shown in the image below (I used an example of vuetify's own menu, as it can I add the image of the system I have the problem on)

by selecting the .v-autocomplete__content.v-menu__content class by devTools, I can position the autocomplete as I want, for example by applying a margin-left on it.

enter image description here

My problem starts happening when I try to pass the v-autocomplete__content class inside a scoped style as I want to add this style only on this page. I've tried using ::v-deep or even >>> as is already used in some other styles on this page, but it's not working.

below is also a picture of the field selected with devTools for better understanding. My real problem is just trying to use the styling within a scoped style, does anyone have any tips or other alternatives to edit the way I want? I'm using Vuejs.

Every help is welcome :)

enter image description here

::v-deep .v-autocomplete__content { border: 2px solid red !important; }

I've already tried using the ::v-deep and >>> modes, or even passing the .v-autocomplete__content.v-menu__content class without ::v-deep

Leonardo Baptista
  • 33
  • 4

1 Answers1

0

If you look at where the v-autocomplete__content div exists in your DOM, it is attached to your root v-app component instead of inside your component. To change this functionality Vuetify provides you the attach prop where you can specify that v-autocomplete attach itself to any element you want (your component root for example). That will allow scoped styling to reach your v-autocomplete

<v-container fluid id="auto-complete-container">
  <v-row align="center">
    <v-col cols="4">
      <v-autocomplete
        v-model="value"
        :items="items"
        attach="#auto-complete-container"
      ></v-autocomplete>
    </v-col>
  </v-row>
</v-container>
yoduh
  • 7,074
  • 2
  • 11
  • 21