CODEWITHSUNDEEP
cssvue.jsvuejs2vuetify.js
user12056490
user12056490

Reputation:

Change height of two different v-col in Vuetify

how can I achieve this kind of style in vuetify using two v-col inside a v-row?

sc

I already tried to recreate this with my own logic but it looks like this. I also tried to change the height of a single v-col in css but it also reflects the height of the other v-col. For example I tried to change the height of first v-col into 100px it will also change the height of the other v-col.

sc 2

 <v-row>
      <v-col cols="4">
        <v-list color="#fdf6f1" shaped>
          <v-list-item-group>
            <v-list-item v-for="(item, i) in items" :key="i">
              <v-list-item-content>
                <v-list-item-title
                  v-text="item.title"
                  @click="checkEvent(i)"
                  style="font-size: 25px"
                ></v-list-item-title>
                <v-list-item-subtitle v-text="item.date"></v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-col>

      <v-col>
        <div v-if="chosenDay === 0">
          <FirstDay />
        </div>
        <div v-else-if="chosenDay === 1">
          <SecondDay />
        </div>
        <div v-else-if="chosenDay === 2">
          <ThirdDay />
        </div>
        <div v-else-if="chosenDay === 3">
          <FourthDay />
        </div>
        <div v-else>
          <FifthDay />
        </div>
      </v-col>
    </v-row>

Upvotes: 1

Views: 2341

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

Use a background color on the contents (list, inner div, etc...) of the columns...

     <v-row class="no-gutters">
            <v-col cols="4">
                <v-list color="grey">
                    <v-list-item-group>
                        <v-list-item 
                            v-for="(item, i) in items" :key="i" 
                            @click="checkEvent(i)" 
                            :class="i == chosenDay?'grey darken-2':''">
                            <v-list-item-content>
                                ...
                            </v-list-item-content>
                        </v-list-item>
                    </v-list-item-group>
                </v-list>
            </v-col>
            <v-col>
                <div v-if="chosenDay === 0">
                   <v-card color="grey">
                     ...
                   </v-card>
                </div>   
            </v-col>
     </v-row>

https://codeply.com/p/C43a5tMRD4

Upvotes: 2

Related Questions