I am using MUI Menu to open and close Menu when clicking on profile pick, the problem is, if you make "Scroll bar" enabled in the computer setting and click on the icon, it shifts to the left on the size of scroll bar.
Any idea how to stop this "jumping" behaviour when clicking the Menu icon?
Thanks!
Before opening the menu After opening
That what I have in .tsx file:
<>
<button ref={anchorRef} className={styles.LogoutButton} aria-controls={'menu'} onClick={handleOpenAccount}>
<AssignmentIndOutlinedIcon style={{ width: 28, height: 28, color: Colors.Grey700 }}/>
</button>
<Menu id={'menu'}
anchorEl={anchorRef.current}
open={Boolean(openMenu)}
onClose={handleCloseAccount}
>
<div className={styles.container}>
<MenuList className={styles.nameField}>{`${user?.firstName} ${user?.lastName}`}</MenuList>
<MenuList className={styles.emailField}>{user?.email}</MenuList>
<Divider className={styles.divider} variant={'fullWidth'}/>
<MenuItem className={styles.menuItem} onClick={redirectToUserAccount}>
<Text className={styles.text}>{strings.view_account}</Text>
</MenuItem>
<MenuItem className={styles.menuItem} onClick={logoutClick}>
<Text className={styles.text}>{strings.log_out}</Text>
</MenuItem>
</div>
</Menu>
</>and CSS:
.container {
padding: p.$SPACING p.$SPACING * 1.5 p.$SPACING p.$SPACING * 3;
text-align: end;
.nameField {
margin-top: p.$SPACING * 1.5;
font-size: large;
}
.emailField {
color: p.$GREY;
margin-top: p.$SPACING;
font-size: medium;
}
.divider {
margin-top: p.$SPACING * 2;
margin-bottom: p.$SPACING;
}
.menuItem {
padding-right: 5px;
border-radius: 5px;
justify-content: flex-end;
.text {
line-height: p.$SPACING * 2;
}
}
}