title: Vuetify v-select component width changing
body: <p>My <code>v-select</code> components should have a fixed width (60px), they fit in a table cell, and I want to prevent them from changing the width after value selected.</p>
  <p>They change the width and drop-down arrow moves to the right after selection, so if there a way to decrease the size of an icon or its padding/margin it might be helpful.</p>
  <p>Don't really know how to get props of this arrow and how this calls.</p>
  <p>Here is the reproducible</p>
  <p><a href="https://codesandbox.io/s/competent-dew-eixq2?file=/src/components/Playground.vue" rel="noreferrer">https://codesandbox.io/s/competent-dew-eixq2?file=/src/components/Playground.vue</a></p>
  <p>EDIT: Add snippet</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.min.css" rel="stylesheet"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"&gt;
    &lt;style&gt;
      .select {
        max-width: 60px;
        max-height: 60px;
        font-size: 11px;
      }
      
      .col {
        max-width: 60px;
        max-height: 60px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;v-app&gt;
        &lt;v-row&gt;
          &lt;div class="col" v-for="col in cols" :key="col"&gt;
            &lt;v-select class="select" :items="variants" item-value="name" item-text="name" label="" dense outlined hide-details single-line v-model="selected"&gt;
            &lt;/v-select&gt;
          &lt;/div&gt;
        &lt;/v-row&gt;
      &lt;/v-app&gt;
    &lt;/div&gt;
  
    &lt;script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.1/dist/vuetify.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      new Vue({
        el: '#app',
        vuetify: new Vuetify(),
        data: {
          selected: "",
          cols: [1, 2, 3, 4, 5],
          variants: [{
              id: 0,
              name: ""
            },
            {
              id: 1,
              name: "1:0"
            },
            {
              id: 2,
              name: "0:1"
            },
            {
              id: 3,
              name: "1:0 B"
            },
            {
              id: 4,
              name: "0:1 B"
            },
            {
              id: 6,
              name: "1:0 R"
            },
            {
              id: 7,
              name: "0:1 R"
            },
            {
              id: 8,
              name: "1:0 F"
            },
            {
              id: 9,
              name: "0:1 F"
            },
          ],
        },
      })
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>