score:0

Accepted answer

ok, it was fixed by using materialgrid and adding some styles (display: "flex", height: "80px", justifycontent: "space-between")

score:0

from the screenshot, it looks like you're displaying a table in a dialog. from this conclusion it is suggested -

  1. to embed your 'table' component inside 'dialogcontent'

  2. the button should be right aligned on the dialog, meaning your buttons should be placed inside 'dialogactions'

i created a sandbox with some mock data (due to insufficient details in the question) - have a look - https://codesandbox.io/embed/material-dialog-actions-qcrnx

score:1

mixing material ui dialog components with html elements can short circuit proper flow of material ui component.

what i had... footer buttons failed to fix to the bottom... notice the body message is in a html div and the footer is in a material ui dialogactions

<dialog>
  <div>body message</div>
  
  <dialogactions>
    <button>cancel</button> <button>save</button>
  </dialogactions>
</dialog>

i fixed it by inserting the body-message div into the material ui dialogcontent component... this made the dialogactions do what it was supposed to do (stay fixed at the bottom).

<dialog>
  <dialogcontent>
      <div>body message</div>
  </dialogcontent>
  
  <dialogactions>
    <button>cancel</button> <button>save</button>
  </dialogactions>
</dialog>

Related Query

More Query from same tag