[Snackbar] Action disappears if message is too long

[DavidLGoldberg]

The snackbar's action seems to disappear when a message is long.

[zachguo]

how long? if it is too long you may consider using other component instead of snackbar. MD specs said

Very short text strings

Snackbars should contain a single line of text directly related to the operation performed. They may contain a text action. They cannot contain icons.

[mbrookes]

@zachguo is correct, but it's still undesirable for the button to disappear when the text is longer than the available space, particularly on mobile, since multi-line layouts aren't currently supported.

The text truncates at a word boundary, but only when it overflows the div that contains it and the FlatButton, rather than leaving room for the button.

[mbrookes]

@oliviertassinari - multiline layout for mobile would be a feature request, but I think the way the button pops below the Snackbar when the text is longer than the available space should be considered a bug.

[Stupidism]

If you are using it in normal web-app(not mobile-app), this should work:

      <Snackbar
        style={{ pointerEvents: 'none', whiteSpace: 'nowrap' }}
        bodyStyle={{ pointerEvents: 'initial', maxWidth: 'none' }}
      />

[tigerabrodi]

@oliviertassinari @samuelsycamore @eps1lon

I know this issue is closed, but am I doing something wrong here:

The action isn't showing at all, and the docs don't really help much here.

        <Snackbar
          open={isSnackbarOpen}
          onClose={handleCloseSnackbar}
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
          action={
            <>
              <Button onClick={() => addPendingRowToSelectionModel()}>Continue</Button>
              <IconButton aria-label="close" sx={{ p: 0.5 }} onClick={handleCloseSnackbar}>
                <Close />
              </IconButton>
            </>
          }
        >
          <Alert severity="error" variant="filled" sx={{ width: '100%' }}>
            Total delivery size will be &gt; 500 GB. Are you sure?
          </Alert>
        </Snackbar>

Thank you!

FYI, we're using MUI for our startup, including data grid pro, its awesome! 😁 ❤️

[tigerabrodi]

Another question, does MUI have a discord to ask questions and does?