The rewritten title is: ::v-deep .v-autocomplete__content.v-menu__content in Vuetify does not work in Vue's style scope

Question

I have a v-autocomplete (vuetify) that can expand the project list

When I click autocomplete to type what is available in the list of items, the container the items are in is not where I want it to be, as shown in the image below (I used the following example) vuetify its own menu because it can add Image of the system I'm having problems with)

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

My problems start happening when I try to pass the v-autocomplete__content class inside a scoped style, since I only want to add this style on this page. I've tried using ::v-deep and even >>> as it's already used in some other styles on that page, but it doesn't work.

Below is also a picture of the fields selected using devTools for better understanding. My real question is just trying to use styles within a range, does anyone have any tips or other alternatives to edit the way I want? I'm using Vuejs.

Any help welcome :)

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

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

Answer 1

If you look at the location of the v-autocomplete__content div in the DOM, you'll see that it's attached to your root v-app component, not inside the component. To change this functionality, Vuetify provides you with the attach attribute where you can specify v-autocomplete to attach itself to any element you want (e.g. your component root). This will allow scoped styles 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>