How do you position Material UI Popper in the bottom right corner of the browser?

Asked 7/2, 2020 at 23:1 Answered 15/9, 2023 at 10:36

javascript css reactjs material-ui popper.js

I'm using Material UI v4.9.1. They have a Popper React component, based on Popper.js v1.14.1.

I'm trying to render a small square card on the bottom right corner of my browser.

With plain CSS, I think I would have to do this.

.card {
    position: 'fixed';
    bottom: 0;
    right: 0;
}

I was trying to do that with the Popper component, but I'm not sure how. This is what I have now.

<Popper
    open={anchor !== null}
    placement="bottom-end"
    anchorEl={anchor}
    popperOptions={{positionFixed: true}}
    modifiers={{
        // I think I need some modifier?...
    }}
>
    {/* card component */}
</Popper>

I'm setting anchor = document.body when the user clicks a button. I've also set

html, body {
    width: 100%;
}

in my root index.html.

However, when the Popper appears it's in the top right corner. The div has this style set.

position: fixed;
top: 0px;
left: 0px;
transform: translate3d(1164px, 5px, 0px);
will-change: transform;

What am I missing?

Aflame answered 7/2, 2020 at 23:1 Comment(0)

check offset

<Popper
  className='popper-root'
  open={open}
  anchorEl={anchorEl}
  placement='bottom-end'
  modifiers={{
    offset: {
    enabled: true,
    offset: '0, 30'
   }
  }}
>

Terrific answered 3/8, 2020 at 11:34 Comment(0)

You can try to set css on Popper.

<Popper
    open={anchor !== null}
    style={{ position: 'fixed', bottom: 0, right: 0, top: 'unset', left: 'unset' }}
>
    {/* card component */}
</Popper>

But this may not be the best solution, maybe you should write the component yourself, because this feature doesn't seem complicated, it may not be necessary to use Popper.

Swat answered 7/2, 2020 at 23:38 Comment(0)

Just remove anchorEl={anchor} prop or set it to undefined, popper content will be child of <body> tag, please double check disablePortal prop (default is false) (follow official document: https://material-ui.com/api/popper/#props).

Hope this help!

Teodora answered 1/6, 2020 at 8:49 Comment(0)

The Popper may appear in the top corer if there is not enough space under the body to draw it. It might be wrapping around and appearing at the top. Try and set your body height to 50% and see if it appears below it.

Marzipan answered 8/2, 2020 at 0:13 Comment(0)

Using @mui/x-date-pickers": "^6.5.0" In the slotProps add

popper: {
          placement: "bottom",
         },

Aeropause answered 15/9, 2023 at 10:36 Comment(0)

Recommended topics

Hot tags