Блог

Я визуализирую функциональность html из своего веб-приложения react на другом сайте. Все работает правильно, за исключением дополнительного пробела в модале успеха.

Смотрите изображение результата ниже:

Исходный код для этого способа был:

     const ModalPopup: React.FC<ModalPopupProps> = ({ open,
  close,
  header,
  onSubmit,
  instruction,
  saveButton,
  headerIcon }) => {

  const useStyles = makeStyles((theme: Theme) => ({
    paper: {
      margin: "10% auto",
      width: 448,
      borderRadius: 8,
      boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.35)',
      padding: theme.spacing(3),
      fontFamily: "'Arial Regular', 'Arial', sans-serif;",
      color: '#333333',
      textAlign: 'left',
      lineHeight: 'normal',
      outline: 'none',
      ['@media (max-width:740px)']: { // eslint-disable-line no-useless-computed-key
        width: 372,
        minHeight: 410,
        padding: theme.spacing(1, 0, 2, 2),
      }
    },
  }));
  const classes = useStyles();

  return (
    <Modal
      open={open}
      onClose={close}
      aria-labelledby="close and logout modal"
      aria-describedby="close and logout, to login with user ID"
    >
      <Paper className={classes.paper}>
        <div className={styles.ModalHeaderContainer}>
          {headerIcon amp;amp; <img alt="Success-icon" src={headerIcon} className={styles.successImage} />}
          <h2 className={styles.ModalHeader}> {header} </h2>
        </div>
        
        {instruction amp;amp; <p className={styles.paragraph}>{instruction}</p>}
        <div>
          <Button id="saveButton" onClick={onSubmit} className={styles.UpdateButtonSave}>
            {saveButton}
          </Button>
        </div>
      </Paper>
    </Modal>
  )
}
export default ModalPopup;
 

Чтобы попытаться устранить проблему, я обновил css, чтобы он был:

   const useStyles = makeStyles((theme: Theme) => ({
    paper: {
      margin: "10% auto",
      width: 448,
      borderRadius: 8,
      boxShadow: '0px 0px 20px 0px rgba(0, 0, 0, 0.35)',
      padding: theme.spacing(3),
      fontFamily: "'Arial Regular', 'Arial', sans-serif;",
      color: '#333333',
      textAlign: 'left',
      lineHeight: 'normal',
      outline: 'none',
      ['@media (max-width:740px)']: { // eslint-disable-line no-useless-computed-key
        width: 372,
        height: 'auto;',
        minHeight: '100% !important;',
        padding: theme.spacing(1, 0, 2, 2),
      }
    },
 

т. е. установите высоту на авто, а минимальную высоту на 100% !важно

Я могу видеть этот стиль сейчас в html, когда просматриваю html в iframe, но пустое пространство все еще есть под кнопкой Закрыть и выйти. Если я сниму флажок minHeight в DevTools, пробел исчезнет — должен ли я просто удалить этот фрагмент css в коде?