CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Cornel Verster
Cornel Verster

Reputation: 1781

Specifying widths for vuetify grid

I have a Vuetify grid with Rows and Columns that looks as follows

enter image description here

Made with the following code:

<v-container fluid>
<!-- Top most row -->
<v-row dense>
  <!-- Insert a column for each group -->
  <v-col></v-col>
  <v-col
    cols="auto"
    :style="{ 'text-orientation': 'mixed',
              'writing-mode': 'vertical-rl' }"
    v-for="group in groups"
    :key="group.id"
  >
    <v-card>
      <v-card-subtitle>This is my X axis</v-card-subtitle>
    </v-card>
  </v-col>
</v-row>

<v-row dense v-for="aspect in aspects" :key="aspect.id">
  <v-col>
    <v-card>
      <v-card-text>My Y axis</v-card-text>
    </v-card>
  </v-col>
  <v-col cols="auto" v-for="n in groups.length" :key="n">
    <v-card>
      <v-card-text>hi</v-card-text>
    </v-card>
  </v-col>
</v-row>
</v-container>

I want the second column from row 2 onwards to align with the second row in row one. Effectively, I want the first col in the first row to be the same width as the first col in the rows that follow, aka this area to be wider:

enter image description here

I've tried to force the width of that first column by inserting a card, but the first column of the following rows seem anchored to their position ending at the third column of the first row, and it ends up looking like this:

enter image description here

Can someone help me to align the second column in the first row to the second column in the following rows?

Upvotes: 0

Views: 2119

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

In order for the columns to be the same width they need to be in the same <v-row> and then use full width divs (<v-responsive>) to wrap the rows...

    <v-container fluid>
            <v-row dense>
                <v-col cols="1">
                    <v-card class="fill-height">
                        <v-card-text> </v-card-text>
                    </v-card>
                </v-col>
                <v-col cols="auto" :style="{ 'text-orientation': 'mixed',
                          'writing-mode': 'vertical-rl' }" v-for="group in groups" :key="group.id">
                    <v-card>
                        <v-card-text :style="{ 'line-height': .82 }" >This is my X axis</v-card-text>
                    </v-card>
                </v-col>
                <v-responsive width="100%"></v-responsive>
                <template dense v-for="aspect in aspects" :key="aspect.id">
                    <v-col cols="1">
                        <v-card>
                            <v-card-text class="text-truncate">My Y axis</v-card-text>
                        </v-card>
                    </v-col>
                    <v-col cols="auto" grow v-for="n in groups.length" :key="n">
                        <v-card>
                            <v-card-text>hi</v-card-text>
                        </v-card>
                    </v-col>
                    <v-responsive width="100%"></v-responsive>
                </template>
            </v-row>
    </v-container>

Note: I also adjusted the line-height of the vertical text.

https://codeply.com/p/4g1rz1RCQ7

Upvotes: 1

Related Questions