CODEWITHSUNDEEP
vue.jsvuetify.js
Leonardo da Rosa Silveira João
Leonardo da Rosa Silveira João

Reputation: 33

I want resize v-chip or other idea to create field with text

Good afternoon! I would like a help to adjust the size of the block where the device, preferably I would like the box to be X px size or something like that. But you have other solution, I would want to see. I'm using vuetify.

enter image description here

<template v-slot:item.device="{ item }">
  <v-chip>
    {{ item.device }}
    <v-icon small right @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
  </v-chip>
</template>

Upvotes: 0

Views: 8905

Answers (1)

depperm
depperm

Reputation: 10756

Add a class to the v-chip and wrap item.device in a span.

<v-chip class="short">
    <span>{{item.device}}</span>
    <v-icon small right @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
</v-chip>

Then add css, where the v-chip class has the width and the span will ellipse.

.short{
  width:100px;
}
.short span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

codepen example

Upvotes: 2

Related Questions