Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

273
Vistas
React MUI: Set fixed height for Dialog component

I am trying to create a dialog (https://mui.com/components/dialogs/), I have tried setting the sx value minHeight, height etc. but when the dialog renders it changes height depending on whats inside.

How can I fix the height to 80% of the window and make sure it does not shrink when there is less content to fill the space?

<Dialog onClose={handleClose} open={open} fullWidth={true} maxWidth="lg" sx={{ height: '80%' }}>
        <DialogTitle sx={{ m: 0, p: 2 }}>
            Search drft
            <IconButton
            aria-label="close"
            onClick={handleClose}
            sx={{
                position: 'absolute',
                right: 8,
                top: 8,
                color: (theme) => theme.palette.grey[500],
            }}
            >
                <CloseIcon />
            </IconButton>
        </DialogTitle>
        <DialogContent dividers>
        {/* <DialogTitle>Search drft</DialogTitle> */}
            <GlobalSearch />
        </DialogContent>
    </Dialog>

Update: following some advice from a different question I made the following update and the dialog is now fixed at 80% height no matter how tall the content is!

<Dialog
  PaperProps={{
    sx: {
      minHeight: '80%',
      maxHeight: '80%'
    }
  }}
  {...other}
>
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda