CODEWITHSUNDEEP
material-ui
Paul
Paul

Reputation: 1403

MUI Select menu width not taking border into account

I am using MUI's Select component for a dropdown, and am trying to get the dropdown menu to be the same width as the Select. Unfortunately, it seems to be 4px thinner than it should be, and I happen to have a 2px border around my select input, which explains why it is 4px less wide. I have a demo of the issue here: https://stackblitz.com/edit/react-4lhmay?file=Demo.tsx. If you check the width of the menu in that demo, it is 4px less than the width of the form control. I would like them to be the same width without having to force the menu to be a specific width, that way I can keep the width of the select at 100% on mobile, which is the desired styling for that breakpoint.

I have tried setting the width of .MuiPaper-root to be width: calc(100% + 4px), but this makes the menu the full width of the viewport, so ~1600px in my case on desktop. I also tried moving the 2px border from the input to the FormControl, but this results in the same problem.

I reported this as a bug to MUI and they indicated it is not a bug with their product: https://github.com/mui/material-ui/issues/41142.

Upvotes: 0

Views: 45

Answers (1)

Kristian
Kristian

Reputation: 130

Not sure why but if you add padding to the container i.e padding: 8px; it seems to fix your alignment issue: https://stackblitz.com/edit/react-4lhmay-mcj6ga?file=Demo.tsx,Demo.styles.ts Its also happens for the out of the box MUI components

Upvotes: 0

Related Questions