Left alignment of Material-UI dialog buttons

Question

I have three buttons in a Dialog like so:

The JSX is

        <DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} >
          <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
            Clear
          </Button>
          <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()} >
            Cancel
          </Button>
          <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose(this.state.selectedValue)} >
            Select
          </Button>
        </DialogActions>

The 'buttonRoot' style simply determines the button coloring. How to I left align the 'Clear' button so it sits on the left? It seems the buttons are each in a div with a MuiDialogActions-action class.

Unpromising

Answer 1

Just use divider element with flex: 1 0 0 CSS style:

<DialogActions>
  <Button>
    Left
  </Button>
  <Button>
    Buttons
  </Button>
  <div style={{flex: '1 0 0'}} />
  <Button>
    Right
  </Button>
  <Button>
    Buttons
  </Button>
</DialogActions>

Rosetta

For anyone curious, flex: 1 0 0 essentially means setting flexGrow: 1, which makes the div grow as much as it can. – Assignment

This is the best and the cleanest solution. Works without affecting default spacing between buttons in DialogActions component if you have one button on the left and several on the right. – Expiration

Answer 2

No need for complicated answers:

---

Just set the DialogActions component style to {justifyContent: "space-between"}

<DialogActions style={{ justifyContent: "space-between" }}>
  <Button>
    Left
  </Button>
  <Button>
    Right
  </Button>
</DialogActions>

Pursuit

Answer 3

You can do it with Flexbox:

DialogActions {
  display: flex; /* displays flex-items (children) inline */
}

DialogActions > Button:first-child {
  margin-right: auto;
}

<DialogActions classes={{ root: this.props.classes.dialogActionsRoot }} >
  <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()}>
    Clear
  </Button>
  <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose()}>
    Cancel
  </Button>
  <Button classes={{ root: this.props.classes.buttonRoot }} size="small" onClick={() => this.props.handleDialogClose(this.state.selectedValue)}>
    Select
  </Button>
</DialogActions>

Note: See it in full screen.

Hysterical

I ended up with a derivative from this solution. I pick the last button on the left and apply the style={{ marginRight: "auto" }} to that one. – Quadratics

Answer 4

Edit: This does not answer the question. It will align all the buttons to the left.

According to the DialogActions API the classes you can override are root and spacing.

After taking a look at the implemantation of the component you can see in root class the rule justifyContent: 'flex-end'.

I simply apllied justifyContent: 'flex-start' with another class:

<DialogActions classes={{ root: classes.leftAlignDialogActions }}>
   ....
</DialogActions>

Make sure to create the class leftAlignDialogActions with makeStyles

const useStyles = makeStyles(theme => ({
leftAlignDialogActions: {
    justifyContent: 'flex-start'
  }
}))

Myriagram

That would align them all on the left, he's asking for just the first one. – Quadratics

Answer 5

I resolved a similar problem with the following addition inside my theme: (using MUI)

 components: {
MuiDialogActions: {
  styleOverrides: {
    root: {
      display: "flex",
      flexWrap: "wrap",
      gap: "8px",
      justifyContent: "start",
      "&>.MuiButtonBase-root": {
        marginLeft: 0,
      },
    },
  },
},

Matless

Answer 6

I would also disableSpacing and then add the flex attributes and MUI styles overrides I need via the sx prop. In my case I had to modify the spacing (gap) from 8px to 10px.

<DialogActions disableSpacing sx={{gap: '10px'}}>
  <Button>Cancel</Button>
  <Button>Submit</Button>
</DialogActions>

Maybe in your case another option is to wrap the 2nd and the 3rd buttons in a Box component and on the container to add justifyContent: space-between. In this way in the flex container you will have 2 flex items which will be pushed to the left inner edge and right inner edge of the container. The left item will be the first button and the right item will be the Box which has the 2nd and 3rd buttons as children.

Humpy

Answer 7

You can use first child selector because first button is clear button in tag DialogActions

DialogActions button:first-child {
  float:left;
}

OR

You can try. You need to adjust left and bottom property accordingly.

DialogActions{
  position:relative;
  width:100%;
}
DialogActions button:first-child {
  position:absolute;
  left:10px;
  bottom:10px;
}

Hope it helps you.

Bullington