What is the best way to make a scrollable `div` that is the same height as my `iframe` with Material-UI?

I am developing a responsive Video Player with an accompanying playlist designed for Desktop and larger screens. The playlist has the potential to contain a large number of items, possibly in the hundreds.

To view my progress so far, please visit https://codesandbox.io/s/responsive-video-player-playlist-q3601

One challenge that I am encountering is that when there are numerous items in the playlist, it becomes non-scrollable and does not align in height with its counterpart (the video player).

My objectives include:
- Ensuring that the playlist matches the height of the video player.
- Providing scroll functionality for playlists containing a high volume of items.

Approaches attempted thus far:
A demo showcasing my efforts can be accessed at https://codesandbox.io/s/responsive-video-player-playlist-q3601

Your assistance on this matter would be greatly valued!

htmlcssreactjsresponsive-designmaterial-ui

Answer №1

To achieve the desired result for both the playlist and player, utilize a breakpoint and position in your code.

Applying a specific class can assist in incorporating additional CSS styling:

Check out this updated Codesandbox example

Updated CSS section: 

const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: "brown",
    display: "flex"
  },
  playerContainer: {
    position: "relative",
    paddingTop: "37.25%",
    height: 0,
    overflow: "hidden",
    maxWidth: "100%",
    backgroundColor: "#000000",
    [theme.breakpoints.down("sm")]: {
      paddingTop: "56.25%"
    }
  },
  iframe: {
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "6px solid yellow"
  },
  playlist: {
    position: "relative",
    [theme.breakpoints.down("sm")]: {
      position: "static"
    }
  },
  playlistContainer: {
    backgroundColor: "lightgrey",
    position: "absolute",
    top: "0",
    bottom: "0",
    right: "0",
    left: "0",
    overflow: "auto",
    [theme.breakpoints.down("sm")]: {
      position: "relative"
    }
  }
}));

Implemented structure: 

<Grid container className={classes.root}>
      <Grid item xs={12} md={8} className={classes.playerContainer}>
        <iframe
          title="video"
          src="https://player.vimeo.com/video/66140585"
          frameborder="0"
          className={classes.iframe}
        />
      </Grid>
      <Grid item xs={12} md={4} className={classes.playlist}>
        <Grid container className={classes.playlistContainer}>
          <Grid item xs={12}>
            {lines.map((line, key) => (
              <div key={key}>{line}</div>
            ))}
          </Grid>
        </Grid>
      </Grid>
    </Grid>

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

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

javascripthtmljsonxmlhttprequest

The error message "Unable to push property in an undefined array" is displayed when attempting to push a property into

I'm struggling to debug the error message TypeError: Cannot read property 'push' of undefined. The following code snippet is what's causing the problem: const parent_lead_contact = this.props.parentLeads?.filter((lead) => lead. ...

javascriptreactjs

Axios is experiencing challenges in transmitting the cookie

Even after attempting to include {withCredentials: true}, I am still facing issues with sending the cookie to the backend server. return await axios.post(`${API_URL}/posts/category/${id}`, { withCredentials: true }) https://i.stack.imgur.com/Cr8xv.png ...

javascriptreactjsnext.jsaxios

The event handler is not defined and is failing to recognize in the React context

Currently, as I delve into the realm of learning React, I find myself facing a perplexing issue regarding the mysterious undefined state of this event handler. Why is it behaving in such an enigmatic manner? const Login = () => { handleSubmit = (e) ...

javascriptreactjs

Having trouble with HTML tags not parsing correctly in PHP?

Similar Question: Getting a parse error: syntax error, unexpected T_STRING 59 I'm working on displaying names from a database in a table format with checkboxes. Everything seems to be functioning correctly until I try to include the input tag wit ...

phphtmlmysql

Encountering difficulties with installing or initiating npm for react

An error occurred while attempting to install react. The error message is as follows: npm ERR! path C:\Users\web\desktop\boy\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open npm ERR! enoent ENOENT: no s ...

node.jsreactjsnpm

The functionality of Flatbutton(Input handler) appears to be malfunctioning

I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...

javascripthtmlreactjsmaterial-designmaterial-ui

javascript code for subtracting values in arrays

I am facing a scenario where I have 3 arrays of the same length. My requirement is to automatically subtract the values in the first two arrays without any user input. If the result of subtraction is negative, I need to identify the index of that array num ...

javascriptphpjqueryhtmlarrays

MUI enables the creation of a fixed vertical box anchored at the bottom of the screen

I’ve attempted the following so far: import "./styles.css"; import { Box, Typography } from "@mui/material"; import styled from "@emotion/styled"; export default function App() { const MainStyle = styled("div")(( ...

cssmaterial-ui

MUI - Material-table/core - Checkbox selection malfunctioning on click event

UPDATE : The matter also pertains to Material Ui's Data table. I attempted to replicate the issue using the provided example in the documentation but encountered the same problem. I have been struggling with an issue related to the selection feature ...

javascriptreactjsmaterial-uimaterial-table

CSS - Is there a way to alter the arrangement of DIVs depending on the size of the screen?

My inquiry pertains to a CSS layout. I currently have 3 divs positioned in a horizontal line next to each other, as depicted below... div1 div2 div3 I am aiming for the divs to reorganize themselves as the screen size decreases. In one scenario, they sho ...

htmlcsslayoutalignment

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

javascriptjqueryhtmlajax

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...

javascriptcssreactjs

Continuously running loop to retrieve data

I've been working on a function that retrieves data from the backend and then assigns it to the state for display in a web browser. Although everything seems to be functioning correctly, I've noticed that every time I make a request, the function ...

javascriptreactjs

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

We are striving to align a group of tspan elements both vertically and horizontally. However, the parent container is not taking into consideration dy values. This lack of consideration is leading to alignment issues. If you adjust the dy values in this ...

javascripthtmlsvg

SQL Query: Change text color based on the result number retrieved

After executing my SQL SELECT statement, I want to display every record in a div using a While statement. I would like the divs to alternate in color, for example: Result 1 = white div Result 2 = grey div Result 3 = white div Result 4 = grey div. I am un ...

phpsqlcssselecthtml

Alter the path within a paragraph tag in html

I'm having some trouble changing the direction of a tag inside another tag. It's not working correctly for me. In the example below, I want to see aslami @ exactly as I have written it, but the result is showing @ before a instead of after i. ...

htmlcss

Using getStaticPaths and getStaticProps with moralis query for dynamic data fetching

I've been trying to getStaticPaths and getStaticProps to work, but I feel like I might be overlooking something. I attempted querying inside each of them, which seems redundant, but I'm not sure how else to do it. Can someone provide an example? ...

reactjsjsonnext.jsmoralis

What is the best API for incorporating interactive maps into my Android application?

I am looking to create an Android app (using Java) with interactive maps similar to ammaps, which can be integrated with HTML5/jQuery Mobile. Check out for reference. The app will display a world map where different areas are highlighted or colored based ...

androidjqueryhtmlgoogle-maps

Incorporate a jQuery userscript on Firefox that includes a link to a form

Attempting to incorporate a search link into an online form using a userscript with jQuery, specifically for Firefox. I typically work in Chrome, so I'm encountering some challenges with compatibility in Firefox. However, I need this to be functional ...

javascriptjqueryhtml