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

Persistent banner designed to accompany blog posts

I've been attempting to insert a banner ad that runs along the left side of my blog post. Unfortunately, all my efforts so far have caused it to display above the content, pushing the blog post down the page. You can view the live link here. Here i ...

htmlcsswordpress

Securing connections with Traefik for HTTPS termination. Clients connect via HTTPS to Traefik, which then communicates internally with React via HTTP

Recently, I set up my web app in Docker with the following components: FRONT - React BACK - Laravel-echo-server, Nginx, Redis, PHP-FPM, and more. Initially, everything worked fine as I accessed it through 127.0.0.1:5000 (using the FRONT-react port) wher ...

reactjsdockerhttpsproxytraefik

Keys in React Native's ListView are used to uniquely identify

There is a warning in my app that is causing me some concern. React keeps prompting me to add keys for each row, but no matter what I try, I can't seem to include these keys. This is how my code looks: <ListView style={styles.listView} dat ...

javascriptlistviewreactjskeyreact-native

When using react-router in the browser, you may encounter an error message stating "hashHistory is undefined."

Attempting to implement React-router in the browser without relying on NPM. Link to CodePen Included the following: let Router = window.ReactRouter; let RouteHandler = Router.RouteHandler; let Route = Router.Route; let DefaultRoute = Router.DefaultRoute ...

reactjsnpmreact-router

Vanilla JavaScript - Conceal all remaining div elements

I have a situation where multiple divs are only visible after clicking a link. How can I ensure that when one div is clicked, all others are closed so that only the clicked one remains visible? Currently, I am using the following JavaScript: functio ...

javascripthtml

Tips for changing the label color of a Material UI TextField when it is not in focus

Looking for guidance on customizing the Textfiled component in material-ui I've successfully made changes to everything except the color of the label when out of focus Check out this image illustrating the issue The default color is black when the ...

reactjsmaterial-ui

When hovering over individual links within a set of blocks, ensure that the other links are not affected or disrupted

I need help creating a forum category link guide. Similar to this example... Specifically, I want it to display as Forums > The Financial Roadmap Two issues I am facing are: when hovering over the link, it shifts down one row and how can I add blocks ...

htmlcss

Error 1: React app failed to initiate due to Node ERR Code

Trying to run an old project with outdated dependencies has been a bit of a challenge. The attempt to update them hit a roadblock when faced with the need to install node modules first, resulting in an ERR! Code 1. The project originated on a different PC ...

node.jsreactjsnpmwebpacknpm-install

html code abruptly halted due to an unexpected termination of the file

I'm experiencing an issue with my senaraiperalatanstaf.php file. I inserted some PHP code in between, but now I'm getting a parse error indicating an unexpected end of the file. I've tried troubleshooting it without success. Any help would b ...

phphtmltags

The locator for the span class cannot be found or interacted with in Selenium

Here is the HTML code snippet for a span element: <td class="header-logout-btn"> <a href="logout.htm" class="btn switch-btn"> <i class="fa fa-times"></i><span class="hidden-xs">Home</span> </a> </td> I ...

javahtmlseleniumselenium-webdriver

The password does not conform to the pattern specified in Angular CLI

I am encountering an issue with password validation. I have implemented a regex pattern like this: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])' and configured my ng-form field as follows: password: ['', [Validators.pattern('(?=.*[a-z])(? ...

htmlregexangularpasswords

Dispatching actions in `componentDidMount` is restricted in Redux

Update at the bottom of post I've created a React container component called AppContainer, which checks if the user is authenticated. If the user is authenticated, it renders the app's routes, header, and content. If not, it displays a Login com ...

javascriptreactjsreduxreact-redux

Enhance your data retrieval from XPATH using Javascript

Here is the layout of an HTML template I am working with: <div class="item"> <span class="light">Date</span> <a class="link" href="">2018</a> (4pop) </div> <div class="item"> <span class="light">From</sp ...

javascripthtmlxpath

What is the reason behind the jQuery only functioning properly on Internet Explorer 8 on this particular page and no other browsers?

I recently created a webpage utilizing jQuery: The functionality on the page should change music images to represent different key signatures when switching from 'Higher Key' to 'Lower Key' in the combo box. While this works perfectly ...

javascriptjqueryhtmlcross-browser

Creating a button in HTML that performs a POST request without redirecting involves using specific code techniques

Looking for a way to create an HTML button that triggers a POST request to a quick route with parameters passed through req.params. The challenge is preventing the button from redirecting me to the route when clicked, but instead staying on the same page w ...

javascripthtmlnode.jsexpressbackend

Applying custom styles to the initial 5 elements post clicking the button with Jquery

I have a set of HTML codes containing multiple buttons. <div class="main"> <div class="button hide">1</div> <div class="button hide">2</div> <div class="button hide">3</div> <div class="button h ...

javascriptjqueryhtml

Create a Typescript React class and define the State type as either an interface or null

When working with React and typescript, it is common to declare state types in the following manner: import * as React from "react" interface IState { someState: string } class MyClass extends React.Component<{}, IState> { state = { someSt ...

reactjstypescript

Including input within a component causes the input to capture all click events

I've been working on a project where I need to create a color picker component. When you click on the .swatch element, a popover opens up with a .cover div that covers the whole screen. Clicking on the cover closes the popover, following standard beha ...

javascriptreactjsdom-eventsreact-dom

The image has max-height within a max-height container inside a fixed-height container

Here's the scenario: Can an image's max-height property be made to respect the fixed height of an ancestor element that is not its direct parent? I am aware that max-height requires a fixed height for calculation, so this query is distinct from ...

cssheight

Designing Checkboxes and Radio Buttons

I am seeking a way to customize the appearance of checked and unchecked checkboxes using images without modifying the HTML structure. I would prefer not to add labels, classes, or IDs to the elements. The provided example only works in Webkit browsers, s ...

javascriptjquerycsscheckboxradio-button