Achieve equal height for two v-flex sections placed side by side in Vuetify framework

desired appearance: https://i.sstatic.net/aPrrP.png

current appearance:

https://i.sstatic.net/JNH2W.png

In an attempt to ensure two tables have a consistent and responsive height using Vuetify features, I have implemented the following code:

<template>
  <div>
    <v-layout class="duo-table" row wrap>
      <!-- reporting scope table -->
      <v-flex xs6 class="left-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            REPORTING SCOPE
          </div>
          <div class="table-content">
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                246
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col" >
                Total variants assessed
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex xs3 class="left-table-xs3-col">
                63
              </v-flex>
              <v-flex xs9 class="left-table-xs9-col">
                Total drugs assessed
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
      <!-- your risk table -->
      <v-flex xs6 class="right-table">
        <v-flex height="100%">
          <div class="duo-table-header">
            YOUR RISK
          </div>
          <div class="table-content">
            <v-layout row wrap>
              <v-flex xs2 class="right-table-xs2-img">
                <v-img :src="imagePath" height='100%'/>
              </v-flex>
              <v-flex xs10>
                <v-flex height="100%">
                  <v-flex class="right-table-xs10-col">
                    YOUR PHARMACOGENOMIC RESULTS
                  </v-flex>
                  <v-flex class="right-table-xs10-col">
                    30 Drugs Potentially Impacted
                  </v-flex>
                </v-flex>
              </v-flex>
            </v-layout>
          </div>
        </v-flex>
      </v-flex>
    </v-layout>
  </div>
</template>

I have also explored using flexbox, but it did not provide the desired result. I am considering incorporating CSS into the img element. Any suggestions on how to achieve my objective would be greatly appreciated. Thank you in advance.

htmlcssvue.jsfrontendvuetify.js

Answer №1

If you are utilizing Vuetify 2+, it is recommended to replace v-layout and v-flex with v-row and v-col respectively. Also, don't forget to update your div tag to v-container with the 'fluid' attribute if you wish to eliminate the default padding of v-container. For those not yet on Vuetify 2, I highly recommend making the switch.

<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>

Answer №2

After utilizing the Vuetify 1.x version feature and CSS, I was able to resolve my issue successfully

Here is 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>

relevant CSS styling applied:

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

The crucial step involved wrapping two tables within a single container. Additionally, for the right table incorporating an image, using CSS attributes enabled the creation of two sections with flexible displays

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Avoid activating the hover state

Is there a way to prevent a button, div, or li from hovering if it already has an active status using CSS? #list-of-tests .item-test:hover:not(.active) { background-color: #4d5f75; border: solid 1px #4d5f75; } #list-of-tests .item-test:active { ...

javascriptjqueryhtmlcsshover

What is the best way to merge various sass directories into a single css file?

I have a situation where I need to compile two separate scss directories into a single css output file. When compiling a single directory, I would use the following command: sass --watch scss/template.scss:css/template.css Is there a way to combine two d ...

csssass

Vue 3 feature: Click the button to dynamically insert a new row into the grid

Just starting out in the world of coding, I've zero experience with Vue - it's my introduction to frameworks and arrays are currently my nemesis. In a recent exercise, I managed to display the first five elements of an array in a table after filt ...

javascriptarraysvue.jsvuejs3

"Redirecting using parameters upon pressing the enter key: A step-by-step guide

I've been pondering about the best way to redirect to a specific site while including query parameters in the URL. <input id="query" name="query" placeholder="Search" type="input" > I have experimented wi ...

javascripthtmlformshttp-redirectinput

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...

javascripthtmlcssreactjs

Using Jquery to toggle the visibility of div elements with the same structure, but ensuring only one is

Many people have posed this question. I am attempting to create a functionality where a div can expand and collapse using a +/- button. I have 5 divs with class=="expanderContent". When the function below is triggered by a click, all 5 items expand or coll ...

javascriptjqueryhtmlcss

What is the procedure for closing a snackbar when the close button is clicked?

I am having trouble closing a snackbar when the close button is clicked. The snackbar should initially pop up on page load and only close when manually triggered. I have set the timeout to zero, but the snackbar does not close when the close button is clic ...

javascripthtmlvue.js

Preventing overflow of monospace text on small viewports in Bootstrap 5: A complete guide

For a web app I am developing, I need to showcase certain text using a monospace font. This is necessary because the text may include elements like ASCII art, requiring a consistent monospace alignment. Moreover, it's crucial that the text does not wr ...

htmlcsstwitter-bootstrapbootstrap-5

What is the reason that a div can accept both before and after selectors, while an img tag cannot have this capability

What is the reason behind a div being able to accept before and after selectors, while an img tag cannot? How can I effectively define two pseudo elements for my image? ...

htmlcss

Implement Angular backend API on Azure Cloud Platform

I successfully created a backend API that connects to SQL and is hosted on my Azure account. However, I am unsure of the steps needed to deploy this API on Azure and make it accessible so that I can connect my Angular app to its URL instead of using loca ...

htmlangulartypescriptazureazure-devops

Issues are arising with the .mouseover functionality within this particular code snippet

Learning Javascript has been a challenge for me so far. I tried following a tutorial, but the result I got wasn't what I expected based on the video. I'm wondering why that is and how I can fix it. I'm aiming to make a box appear suddenly w ...

javascriptjqueryhtmlcss

Having trouble with webpack displaying CSS background images?

I've set up the html boilerplate using webpack. I'm currently encountering an issue where calling an image in my scss file like "background: url('/img/img.png');" isn't working. I've included the webpack file and folder struct ...

javascripthtmlcsswebpack

Is there a way to reset data in a child component from a parent component in vue.js 2?

Here is the structure of my parent component: <template> <div ref="modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content modal-content-data"> ...

vue.jsvuejs2vue-componentvuex

I need to achieve success in a straight line, but my outcome is veering off course

I am looking for a specific outcome: https://i.sstatic.net/XUnrR.png This is the desired result: https://i.sstatic.net/XUnrR.png Utilizing Bootstrap version 4.4.1 attempting to use grids with no success <body> <div style="margin-left: 7 ...

htmlcssbootstrap-4frontend

Tips for confirming a date format within an Angular application

Recently, I've been diving into the world of Angular Validations to ensure pattern matching and field requirements are met in my projects. Despite finding numerous resources online on how to implement this feature, I've encountered some challenge ...

javascripthtmlangulartypescript

Problem occurring with Bulma CDN version 0.8.0 failing to identify the spacing helper

Recently revisited an older project I had started some time ago using the Bulma framework. However, for some reason, the 0.8.0 CDN is not being imported or recognized correctly by the spacing classes. Here's the code snippet I had initially: <link ...

htmlcsscdnbulma

The drop-down menu is malfunctioning as it is not displaying the complete text and the

At the moment, I am facing an issue where my submenu items for Add Subject, Drop Subject, and Delete Subject are not centralized as intended. Additionally, the Executive Summary text in the submenu is getting cut off. Can someone please help me with expand ...

htmlcss

What occurs when Click events are triggered on an <object> element?

I have set up a div, and inside that container, I embedded an SVG image using object (which I plan to manipulate later...). <div id="click-me"> some random Text <object data="some.svg" /> </div> Next, I added event listeners for t ...

javascripthtmlsvg

The jQuery fadeToggle function toggles the visibility of an element starting from hidden instead

I'm having an issue where text in my div only appears on the second click, instead of the first. What could be causing this problem? $('#fPaperCirclePic').on('click', function () { $('#fPaperCircleText, #isargebla, #moq10 ...

javascriptjqueryhtmlcss

I'm having difficulty grasping the concept of creating a responsive design

I've been working on making this video embed responsive, and I've got it working for tablets. Now, my next challenge is optimizing it for phones and handling browser window resizing dynamically. Here's the desired layout: https://i.sstatic. ...

htmlcssiframeresponsive-designembed