Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

263
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda