[Dialog] TextField label gets cut off when placed within a DialogContent component

[jim-moody]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

If you put a TextField at the top of a DialogContent, the label gets cut off when typing in the field.

Expected behavior 🤔

Seems like maybe there should always be some padding at the top of DialogContent or some kind of form wrapper that adds padding

Steps to reproduce 🕹

https://codesandbox.io/s/little-bush-rt0zuy?file=/src/Demo.tsx

Context 🔦

N/A

Your environment 🌎

N/A

[abhinav-22-tech]

Similar kind of issue: #29892

[supervanya]

If anyone is having the same issue and want a quick fix in the meantime, we did a DialogContents theme override by adding padding on top:

// theme.ts
const theme = createTheme({
  components: {
    // todo: remove once the issue is addressed: https://github.com/mui/material-ui/issues/31185
    MuiDialogContent: {
      styleOverrides: { root: { paddingTop: `${defaultSpacing}px !important` } },
    },
  },
});

[ZeeshanTamboli]

Also can be solved by adding margin="dense": #29892 (comment).

Duplicate of #29892 which will be considered or fixed in v6.

[vishcomestrue]

Also can be solved by adding margin="dense": #29892 (comment).

Duplicate of #29892 which will be considered or fixed in v6.

This is not working for me. Mine still gets cuts off. I have tried all three margin values: "none", "normal", "dense".

[willzittlau]

Ditto. margin="dense" solved it for me

[kalanakodez]

This incident happened due to the overflow inside <DialogContent>. If you have overflow included in the Textfield wrapper (In Your case <DialogContent> ) or Textfield itself then the label is always cut-off. See the example below

<Dialog open>
  <DialogTitle>Some title</DialogTitle>
  <DialogContent sx={{ overflow: "initial" }}>
      <TextField label="Some label" />
  </DialogContent>
</Dialog>