CODEWITHSUNDEEP
reactjsmaterial-ui
Fred A
Fred A

Reputation: 1764

Make MUI dialog content size follow the size of the content

As titled,

I want to show up a Youtube video inside a dialog upon page load, in which it would automatically open up the dialog and play the Youtube video. So i have this component here for my landing page

// Main Application container
import React, { useState } from 'react';
import { BrowserRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
// Application routes
import AppRoutes from '../routes';
// YouTube component
import YouTube from 'react-youtube';
// Components
import HeadNav from '../components/header/Nav';
import Footer from '../components/footer/Footer';
import Grid from '@material-ui/core/Grid';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';

const styles = theme => ({
  videoadjust: {
    padding: 0 // To clear any unnecessary padding
  }
});

const App = (props) => {
  const { classes } = props;
  const [openDialog, setOpenDialog] = useState(true);

  return (
    <div>
      <Dialog onClose={() => setOpenDialog(false)} open={openDialog} fullWidth={ true } >
        <DialogContent className={classes.videoadjust} >
          <YouTube videoId='OPf0YbXqDm0' />
        </DialogContent>
      </Dialog>
      /* Some other contents in here*/
    </div>
  )
}

Im using state hook and set the value to true on initialization. Problem is that, the dialog box chopped the Youtube video, showing a scroll bar due to overflow. Upon checking the CSS, i can see that the dialog has a set fixed width applied onto it, which is smaller than the video width.

I want the dialog content to follow the size of the contents put inside it, and i don't want it to trigger the overflow clause, showing scrollbar on any side of the dialog box. How can i achieve this?

Upvotes: 5

Views: 12851

Answers (2)

Peter Wang
Peter Wang

Reputation: 73

You can either have the Dialog set to a certain width that MUI has already preset.

<Dialog open={true} maxWidth="lg">

And these values can be things like: xs, sm, md, lg, xl. These are predefined maxWidths that a Dialog can be and if you throw in a fullWidth in there the Dialog will automatically stay at the maximum width possible. IE:

<Dialog open={true} maxWidth="lg" fullWidth>

Should you want something like no maxWidth you can do

<Dialog
   open={true}
   sx={{ ".MuiPaper-root": { maxWidth: "none" } }}
>

And what this does is access the Mui Paper className underneath the Dialog and override it's maxWidth property.

HOWEVER when doing a solution like this, you can't really do something like width: "100%" in your child component as the Dialog is already trying to shrink to the smallest size. In your children components they need to have a set width or minWidth so that the Dialog can grow along with the childrens size. Doing this maxWidth: "none" and setting the dialog's width allows you to custom choose how wide your dialog should be

Lets say you're using the maxWidth: "none" solution and your video is still getting clipped. But you know that the video has to be at least 500px wide. What you can do is:

<Dialog
   open={true}
   sx={{ ".MuiPaper-root": { maxWidth: "none" } }}
>
    <DialogContent>
        <Box sx={{ display: "flex", minWidth: "500px" }}>
            <YoutubeVideo width={"100%"}/>
        </Box>
    </DialogContent>
</Dialog>

Now what'll happen is you have no maxWidth on your Dialog and inside have a Box that will make sure to always take at least that much width which can then be taken by your Youtube video.

Upvotes: 2

will92
will92

Reputation: 1044

You can change the width of Dialog by using maxWidth attributes. There are 5 different dialog width that you can choose from, xs, sm, md, lg, xl.

For example,

<Dialog onClose={() => setOpenDialog(false)} open={openDialog} fullWidth={ true } maxWidth={"md"}>

Let me know if this is helpful

Upvotes: 5

Related Questions