Currently utilizing Material UI version 4.9.1 which includes a React component called Popper, based on Popper.js version 1.14.1.
The goal is to display a small square card at the bottom right corner of the browser.
Ordinarily, using plain CSS, the following can be done.
.card {
position: 'fixed';
bottom: 0;
right: 0;
}
Attempts have been made to achieve the same using the Popper component without success. The current implementation is as follows.
<Popper
open={anchor !== null}
placement="bottom-end"
anchorEl={anchor}
popperOptions={{positionFixed: true}}
modifiers={{
// Potential need for modifiers?...
}}
>
{/* card component */}
</Popper>
Setting anchor = document.body upon button click, along with the following styles in index.html.
html, body {
width: 100%;
}
Despite these configurations, the Popper appears in the top right corner with these styles applied to the div.
position: fixed;
top: 0px;
left: 0px;
transform: translate3d(1164px, 5px, 0px);
will-change: transform;
Any insights on what might be missing in this implementation?