https://i.stack.imgur.com/ZUYa4.png
Utilizing a material-ui (v 4.9.5) Popper for a pop-out menu similar to the one shown above has been my recent project. The anchorElement is set as the chosen ListItem on the left side. My goal is to have the Popper align perfectly with the top of the main menu, however it consistently falls short by 5px.
Upon inspecting the Chrome Dev Tools, I notice that the issue lies within the translate3d parameters where there is a problematic 5px value present. Adjusting this value to 0px instantly resolves the problem.
The question arises - how can I achieve this adjustment programmatically? Despite my attempts to use modifiers in the underlying popper.js, no changes are observed.
<Popper
modifiers={{
offset: {
enabled: true,
offset: '-5, 0'
},
}}
className={globalMenuStyle.popperStyle}
placement="right-end"
open={isPopoverOpen}
onClose={handleHidingGlobalMenu}
anchorEl={anchorElement}>
{popoverMenuItems}
</Popper>
An interesting observation is that while adjusting the x-axis using the modifiers does lead to shifts along that axis, trying the same technique on the y-axis yields no results. This raises the question - Why does the x-axis modification work while the y-axis doesn't?
modifiers={{
offset: {
enabled: true,
offset: '0, 50'
},
}}