Utilizing Material UI's SwipeableDrawer component, I have successfully created a bottom drawer with a fixed action button container. The container is positioned using position: fixed; bottom: 0;. While this setup works effectively on desktop browsers, I have encountered an issue when viewing the drawer on mobile devices.
The problem arises when the content inside the SwipeableDrawer is long enough to require scrolling. If I scroll to the bottom and then attempt to scroll further, the fixed element (the action button container) shifts position and no longer remains aligned to the bottom.
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{/* long content */}
<Box
sx={{
backgroundColor: "#fff",
position: "fixed",
bottom: "0",
left: "0",
display: "flex",
width: "100%",
"> *": {
flex: "1",
},
}}
>
<Button onClick={toggleDrawer(anchor, false)}>Cancel</Button>
<Button onClick={toggleDrawer(anchor, false)}>Submit</Button>
</Box>
</SwipeableDrawer>
You can view example code here and a demo video here
I have attempted using position: sticky as an alternative, but it does not align with my other requirements. As a result, I am not considering utilizing sticky positioning.
If you have any insights or solutions to this issue, your input would be greatly appreciated. Thank you!