[Vuejs]-Vuetify make items stay in a single row and resize based on content

by

0👍

✅

Not sure if I understand your goal 100% but seems like you want to add the cols property to your columns. This way the right most button will never slide into a new row and the chip-group will use the most available space.
This behaviour defaults to all screen sizes. If you wanted the breakpoint lg to behave differently, you can add lg="6" for example.

    <v-row no-gutters>
        <v-col cols="11">   <--- here
          <v-chip-group>
            <v-btn text v-for="drive in drives" :key="drive.name">
              {{ drive.name }}
            </v-btn>
            <v-btn text>Home</v-btn>
            <v-btn text v-for="location in favourites" :key="location.name">
              {{ location.name }}
            </v-btn>
          </v-chip-group>
        </v-col>
        <v-col cols="1">   <---- and here
          <v-btn text><v-icon>mdi-close</v-icon></v-btn>
        </v-col>
      </v-row>

Leave a comment