[Vuejs]-Vuetify make two v-flex section have same height side-by-side

by

0👍

✅

I have resolved my problem with the usage of Vuetify 1.x version feature and CSS

my template:

<v-layout row wrap>
  <!-- reporting scope table -->
  <v-flex xs6>
    <div>
      REPORTING SCOPE
    </div>
    <v-layout row wrap>
      <v-flex xs3>
        246
      </v-flex>
      <v-flex xs9>
        Total variants assessed
      </v-flex>
      <v-flex xs3>
        63
      </v-flex>
      <v-flex xs9>
        Total drugs assessed
      </v-flex>
    </v-layout>
  </v-flex>
  <!-- your risk table -->
  <v-flex xs6>
    <div>
      YOUR RISK
    </div>
    <v-layout class="right-table-content">
      <v-flex xs2>
        <v-img :src="imagePath" style="height:100%;"/>
      </v-flex>
      <v-flex xs10>
        <v-layout row wrap>
          <v-flex xs12>
            YOUR PHARMACOGENOMIC RESULTS
          </v-flex>
          <v-flex xs12>
            {{ drugsNum }} Drugs Potentially Impacted
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-flex>
</v-layout>

related CSS style:

.right-table-content {
  display: flex;
}

The key point is to wrap two tables inside one container. And for the right table with image, we can use CSS feature to set two sections with flex display

👤Minwu Yu

1👍

if you’re using vuetify 2+ then v-layout and v-flex are depricated use v-row and v-col instead and rename your div to v-container with attribute fluid (only if you want to remove dafault padding of v-container). if you’re not using vuetify 2 then I’d suggest you migrate to it.

<template>
  <v-container>
    <v-row>
      <!-- reporting scope table -->
      <v-col cols="6">
        <v-row class="duo-table-header">
          REPORTING SCOPE
        </v-row>
        <v-row class="table-content">
          <v-row>
            <v-col cols="6">
              246
            </v-col>
            <v-col cols="6">
              Total variants assessed
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              63
            </v-col>
            <v-col cols="6">
              Total drugs assessed
            </v-col>
          </v-row>
        </v-row>
      </v-col>
      <v-col cols="6">
        <v-row class="duo-table-header">
          YOUR RISK
        </v-row>
        <v-row class="table-content">
          <v-col cols-="2">
            <v-img :src="imagePath" height='100%'/>
          </v-col>
          <v-col cols="10">
            <v-row>
              <v-col cols="12">
                YOUR PHARMACOGENOMIC RESULTS
              </v-col>
            </v-row>
            <v-row>
              <v-col cols="12">
                30 Drugs Potentially Impacted
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>
👤Nishank Sisodiya

Leave a comment