In React Material UI v4 or v5, there is a common problem with zoom out, for example, if you put the following style to body or HTML tag:
body {
zoom: 80%; /* Zoom out */
}
all the dropdowns in the Material UI position will be shifted from the correct place that must be on it.
1: This is the correct place without zoom:
2: This is the issue after adding zoom:
3: This is the video for the problem:
4: Some notes about this issue:
1- Actually, we can fix the problem using browser zoom out by pressing command and [ – ] key, but I’m looking for a code-based solution without telling the users to do something.
2- Select2 not facing the same issue, you can zoom out and keep the menu in the same place, maybe that because the way of implementing the dropdown is different.
3- Angular Material not facing the same issue you can follow the link for the sandbox Angular to make sure there is no issue with zoom out.
5: The question is how to make Material UI behaves like Select2/ Angular Material or the normal dropdown
without telling users to do something, How does Material UI determine the dropdown menu position? how we can override this function?