web-dev-qa-db-fra.com

Comment faire défiler un Material-ui Modal

J'ai créé un Modal et y ai mis du texte décrivant mon application et comment l'utiliser, mais le texte déborde du Modal et donc le haut et le bas du texte ne sont pas visibles . Je voudrais faire défiler le composant afin que mon texte ne coule pas aux extrémités de la page.

// The styling for the modal
const styles = theme => ({
    paper: {
        position: 'absolute',
        width: theme.spacing.unit * 130,
        backgroundColor: theme.palette.background.paper,
        boxShadow: theme.shadows[5],
        padding: theme.spacing.unit * 4,
    },
});


function getModalStyle() {
    const top = 50
    const left = 50

    return {
        top: `${top}%`,
        left: `${left}%`,
        transform: `translate(-${top}%, -${left}%)`,
        overflow: "scroll"
    };
}
// The actual modal
<Modal
    aria-labelledby="simple-modal-title"
    aria-describedby="simple-modal-description"
    open={this.state.modalOpen}
    onClose={this.handleModalClose}
>
    <div style={getModalStyle()} className={classes.paper}>
        <MyLongTextComponent/>
    </div>
</Modal>

J'aimerais que cette fonctionnalité de défilement soit indépendante de la page réelle derrière. Je n'ai pas trouvé beaucoup d'aide sur Internet, donc tous les pointeurs seraient très utiles! De plus, si un Modal n'est pas le bon composant à utiliser dans cette situation, faites-le moi savoir. Je suis modérément nouveau pour React et material-ui, donc s'il y a une meilleure façon, j'aimerais apprendre comment.

javascriptreactjsmaterial-ui
5
Jahziel Villasana

Je sais que cette question a déjà reçu une réponse, mais j'ai trouvé la réponse cochée comme incomplète.

Afin de créer un modal approprié, vous souhaiterez probablement qu'il ait une hauteur maximale et qu'il soit divisé en 3 sections principales:

  • Entête
  • Contenu
  • Pied de page (facultatif)

Si vous avez une longue liste d'éléments dans le contenu (c'est-à-dire un formulaire), définissez overflow: 'scroll' à modal entraînera deux problèmes principaux:

  • maxHeight ne sera appliqué qu'au conteneur tandis que le reste du contenu sera toujours visible en dessous
  • Lorsque l'utilisateur fait défiler, l'en-tête défile également hors de vue

Un exemple plus proche de la production impliquant uniquement l'en-tête et le contenu serait alors:

const styles = theme => ({
  modal:{
    position:'absolute',
    top:'10%',
    left:'10%',
    overflow:'hidden',
    height:'100%',
    maxHeight: 500,
    display:'block'
  },
  header: {
    padding: '12px 0',
    borderBottom: '1px solid darkgrey'
  },
  content: {
    padding: 12,
    overflow: 'scroll'
  }
});

const { classes } = this.props
<Modal open={this.state.open}>
  <div className={classes.modal}>
    <div className={classes.heading}>
      <h4>Your Title here</h4>
    </div>

    <div className={classes.content}>
      <Button size="small" color="primary" variant="contained" onClick={this.closeOrder}>
        Close
      </Button>

      {this.getPics()}
    </div>    
  </div>
</Modal>

En plus d'être mieux formatée, cette solution présente également deux différences principales qui résolvent les problèmes réels expliqués ci-dessus:

  • Modal a overflow: hidden, cachant tout en dehors de sa boîte
  • Le contenu a overflow: scroll, qui ne fait pas monter l'en-tête et c'est ce que nous recherchons

J'espère que cela t'aides!

1
Moleskine

Vous aurez plus de chance d'utiliser le composant Dialog. Modal est une construction de niveau inférieur que Dialog exploite. Vous pouvez trouver des exemples de dialogue dans la section des démos de composants.

0
Ryan Cogswell