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.
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:)
::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
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.