CODEWITHSUNDEEP
cssvue.jsvuejs2vuetify.jscss-grid
Meena Chaudhary
Meena Chaudhary

Reputation: 10665

How to reduce Vuetify Grid column width for bigger screen sizes

I am using vuetify grid system to build a reply component. With column ratio of 1:11 for icon and reply column respectively. Below is the code for it

<v-row justify="center" class="ma-0 pa-0">
    <v-col
      id="vote-col"
      cols="1"
      class="pa-0 d-flex flex-column align-center"
    >
      <v-icon size="24">mdi-thumb-up</v-icon>
      <span>{{ likes }}</span>
    </v-col>
    <v-col id="question-col" cols="10" class="pa-0">
      <v-row class="ma-0 replyFont">
        {{ reply }}
      </v-row>
    </v-col>
  </v-row>

This looks fine on smaller screens. But as we go on the screen sizes above 1100px, even cols="1" becomes too wide and creates a lot of space between the icon column and the reply column as seen in the pictures below

enter image description here enter image description here

How to fix v-col having more width than required? I know I can't go less than 1 for cols property. How you guys been handling this?

Upvotes: 4

Views: 6403

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362380

You could use cols="auto" to make the column the width of its content, and then no cols attribute on the other column to allow it to grow the remaining width.

    <v-row justify="center" class="ma-0 pa-0">
            <v-col id="vote-col" cols="auto" class="blue py-0 d-flex flex-column align-center">
                <v-icon size="24">mdi-thumb-up</v-icon>
                <span>0</span>
            </v-col>
            <v-col id="question-col" class="pa-0">
                <v-row class="ma-0 replyFont">
                    ...
                </v-row>
            </v-col>
    </v-row>

Demo: https://codeply.com/p/pX7pin7b4L

Upvotes: 10

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37793

Setting cols="X" will use Vuetify CSS class col-X which is defined like 

.col-X {
    flex: 0 0 YY%;
    max-width: YY%;
}

where YY is computed as 100/12 * X where X is value pased to cols. X can be only whole number and minimum is 1.

That means minimum width of the column is 8.33333... percent

If you want something smaller (or fixed), you must apply your own style with max-width CSS attribute...

Upvotes: 3

Related Questions