Stop the container from growing in height due to column expansion

I'm facing an issue with my Vuetify two-column layout. The left column contains media with varying aspect ratios, while the right column houses a playlist. As the playlist grows in length, it extends the container, leaving empty space below the media.

I want the right column to have a scroll feature when the content is too long, without expanding the container. I tried setting a max height, but with the unpredictable aspect ratios of the media, the maximum height cannot be accurately determined, causing premature cutoffs.

<v-card dark>
  <v-row no-gutters class="playlist-container">
    <v-col cols="8" class="pa-0">
      <!-- media element, could be image or video of any aspect ratio -->
      <img src="https://placehold.it/1400x700">
    </v-col>

    <v-col cols="4" class="pa-0">
      <!-- playlist container -->
      <v-layout fill-height column justify-space-between>

        <!-- playlist items -->
        <v-list class="pa-0" class="playlist-items">
          <v-subheader>Category title</v-subheader>
          <v-list-item two-line link v-for="(video, idx) in items" :key="idx">
            <v-list-item-avatar class="ma-2 ml-0 font-weight-bold">
              {{ idx + 1 }}
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title>{{ video.title }}</v-list-item-title>
              <v-list-item-subtitle>example &bull; 1k stats</v-list-item-subtitle>
            </v-list-item-content>
            <v-list-item-action-text class="mr-2">
              6:39
            </v-list-item-action-text>
          </v-list-item>
        </v-list>

        <!-- bottom link -->
        <v-list class="pa-0">
          <v-divider />
          <v-list-item two-line link>
            <v-list-item-avatar class="mr-4">
              <v-icon size="32" color="primary">play_circle_filled</v-icon>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title>Lorem ipsum</v-list-item-title>
              <v-list-item-subtitle>Bottom text</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-layout>
    </v-col>
  </v-row>
</v-card>

For a demonstration, you can view a minimal demo here.

Answer №1

To make it work, I added a class to the playlist items v-list as shown below:

.playlist-container .playlist-items {
  flex-basis: 0px;
  flex-grow: 1;
  overflow-y: auto;
}

Answer №2

To find the current height of the right-hand column using document.getElementById and element.offsetHeight as a computed property, you can then adjust the playlist container:

<v-col class="pa-0 overflow-y-auto" :style="{'max-height': `${height}px`}">

Ensure to replace height with the computed height.

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

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

Animating the appearance and behavior of radio buttons using CSS transitions and JavaScript

My jQuery code allows me to fetch attributes from the .item element, but I'm having trouble with my CSS transitions not working as intended. To see the desired transition effect, try replacing .item with .item-tile. How can I make my CSS transitions ...

Changing the CSS class of the Bootstrap datetime picker when selecting the year

Is there a way to change the CSS style of the Bootstrap datetime picker control so that when selecting years, the color changes from blue to red? I attempted to do this with the following code: .selectYear { background-color:red!important; } However ...

Error: Material-UI prop type validation failed - Please specify either `children`, `image`, `src`, or `component` prop

Despite having an image prop in CardMedia, I kept encountering this error. Here is a snippet of the code: Error description: const Post = ({ post, setter }) => { const classes = useStyles(); return( <Card className={classes.card} ...

Having difficulty navigating Vue.js 2 routing with browser history issues

Recently encountered a dilemma - I pass data to the props of the /router-link/ tag, when I click on the link, it takes me to the article and retrieves the data correctly. However, if I hit the "back" button in the browser and then "forward," the article ap ...

Injecting Vue.JS data into an HTML attribute

I'm currently exploring Vue.JS and working on a status bar. I am curious about how to incorporate data from Vue into an HTML attribute. <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="score" aria-valuem ...

Executing TipTap commands from a script tag in Vue 3: A step-by-step guide

One of the components I'm working with includes the following: <button @click="$refs.image.click(); editor.chain().focus().setImage({ src: state.image }).run()"></button> <input type="file" ref="image" sty ...

Using the jQuery method `fadeToggle` to handle the functionality of multiple buttons toggling hidden text

I am struggling to make fadeToggle work properly. I want to reveal text when clicking on another div. Since I plan to use this for multiple elements, I am looking for a smart and efficient way to handle them all. Here is my current attempt which does not ...

Incorporating stick-to-top scroll functionality using AngularJS and ng

I am trying to implement a 'sticky' scroll on dynamic content. My current working example can be found here. It seems to be working, but I encounter a small 'flicker' when new items are appended. This issue seems to be related to the se ...

Is there a way to remove text from a div when the div width is reduced to 0?

Upon loading the page, my menu is initially set to a width of 0px. When an icon is clicked, a jQuery script smoothly animates the menu's width to fill the entire viewport, displaying all menu items (links) perfectly. The issue I'm facing is that ...

Optimal method for integrating Google Font in GWT application

After successfully installing the Roboto font on my machine, I proceeded to include it in my welcome.html file by adding the following code: <link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesh ...

Transforming an image by masking it to create a binocular-like view

I've been experimenting with creating a unique visual effect where an image is revealed through a binocular-shaped element that follows the mouse cursor. The circular part of the element moves along with the cursor, unveiling parts of the image as it ...

jQuery's capability to select multiple elements simultaneously appears to be malfunctioning

I am dynamically creating div elements with unique ids and adding span elements with specific CSS properties. $(".main").append("<div class=largeBox id=" + counter + "</div>"); $(".largeBox").append("<span class=mainTitle></span>"); ...

Error with tsConfig file not resolving the paths starting with "@/*"

When attempting to create a path alias for "./src/components" that functions in Vite but not in the tsConfig file, I have exhausted all solutions found on Stackoverflow with no success. tsConfig.js { "compilerOptions": { "target" ...

What causes the CSS class and jQuery to become unresponsive when rapidly moving the cursor over a specific selector while utilizing .hover(), .addClass() and .removeClass()?

After creating a customized h1 element, I implemented a feature where a class is added and removed from it with a smooth transition of 300ms when the mouse hovers over and off its parent DIV #logo. This was achieved using jQuery's .hover() method alon ...

Tips on utilizing Vue transition for resizing a div element

In my Vue project, I'm looking to create a toggle effect between two divs with a smooth transition. The goal is to slowly expand the div to a specific width on one click and then shrink it back on the next click. While I've managed to get the exp ...

What could be causing the lack of downward rotation of my arrow in css? (specifically, the span element)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de ...

Unlocking the secrets of accessing data props from a different component in Vue.js

I am working with a component called nabber/header that has some props. I need to insert these props into the component and then pass them onto another component. How can I retrieve this data in order to use it for CRUD operations on a database? Is it feas ...

When working with Vue API composition, is it recommended to utilize `ref` within the `

When using reactive in Vue API composition, should I opt for ref or not? Are they equivalent? Does reactive perform the same function as ref? const state = reactive({ loading: ref(true) }); or const state = reactive({ loading: true }); ...

Issues with Vue js not updating the DOM

I am currently working with multiple components: A, B, and C. In component A, there is an array that plays a crucial role in the flow of data. When an item is selected in component A: An emit event triggers a method in component B that displays the lengt ...