CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2vuetify.js
theJuls
theJuls

Reputation: 7470

Make Vuetify's v-select smaller so that it can nicely fit within a paragraph

I have a situation where I have a paragraph, which needs to have a select box right in the middle of it. However, v-select is a bit too big and doesn't seem to allow you to control its width.

This is currently what it looks like:

new Vue({
  el: '#root',
  vuetify: new Vuetify(),
  template: `
  <div style="{ margin: '20px' }">
    <v-row>
      <v-col col="12">
        <p>I would like to have the following select: <v-select placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
      </v-col>
    </v-row>
   </div>
  `
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="root"></div>

Based on the API docs, there doesn't seem to be an easy way to control for its size. What is the proper way of getting this done?

Upvotes: 1

Views: 4779

Answers (2)

innerurge1
innerurge1

Reputation: 728

You will have to override the Vuetify css with your own styles. A good way to do this is to create some kind of override class for your UI or for specific things you need to have higher in the cascade. Then you can call the Vuetify classes inside that class and most of the time it will make your styles fire last. If that still fails, you can resort to adding !important after the style that isn't picking up.

new Vue({
          el: '#root',
          vuetify: new Vuetify(),
          template: `
          <div class="override-class" style="{ margin: '20px' }">
            <v-row>
              <v-col col="12">
                <p>I would like to have the following select: <v-select placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
              </v-col>
            </v-row>
           </div>
          `
          })
.override-class .v-input {
  display: inline-block;
  width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

        <div id="root"></div>

Upvotes: 4

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could apply an inline CSS style style="width:64px;display:inline-flex"

new Vue({
  el: '#root',
  vuetify: new Vuetify(),
  template: `
  <div style="{ margin: '20px' }">
    <v-row>
      <v-col col="12">
        <p>I would like to have the following select: <v-select style="width:64px" placeholder="0"/> shrunk and displayed with this text all in line. How can I do that?</p>
      </v-col>
    </v-row>
   </div>
  `
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

    <div id="root"></div>

Upvotes: 2

Related Questions