Material-ui: [Select] Change popover position

Created on 20 Jul 2018 · 11Comments · Source: mui-org/material-ui

[x] This is a v1.x issue.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I want to disable the way the select displays the popover, with the selected item being on the select, popover moving weird, just want to disable it, and position the menu under the select permanently.
I've been through Select's files, couldn't find it. if you can walk me through, I'll do it myself and make a PR.

Current Behavior

The popover is moving according to the selected item and there is no disable option / reposition option.

Examples

I want the menu to be under the select.

Context

Select question

Source

w3nda

Most helpful comment

Oh, it's with the Select, let's go one step deeper:

The Select is using the Menu:
♻️

      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

oliviertassinari on 21 Jul 2018

👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

All 11 comments

@w3nda Following the documentation:

The Menu component is built on top of the Popover:
The Popover can be positioned as you are expecting:
Combining these two informations and fixing a warning, we can came up with:

        <Menu
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          getContentAnchorEl={null}

https://codesandbox.io/s/9l17k3qnk4

I hope that help.

oliviertassinari on 21 Jul 2018

👍13

Oh, it's with the Select, let's go one step deeper:

The Select is using the Menu:
♻️

      <Select
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >

https://codesandbox.io/s/18l2042y97

oliviertassinari on 21 Jul 2018

👍53 ❤8 🎉6 🚀5 😄2 👀1 👎1

King!
I've found that if the Menu has enough space under it, it will render perfectly, but if he won't have space on screen Menu will be pushed up. true? or broken behavior?

w3nda on 22 Jul 2018

I've found that if the Menu has enough space under it, it will render perfectly, but if he won't have space on screen Menu will be pushed up.

@wenduzer This sounds like the expected behavior.

oliviertassinari on 22 Jul 2018

🎉3 ❤2

Oh, it's with the Select, let's go one step deeper:

@oliviertassinari Thanks, this is exactly what I have been searching for past 2 hours.

Shrikant9 on 4 Mar 2019

@Shrikant9 How can we improve the discoverability of the answer?

oliviertassinari on 4 Mar 2019

How can we improve the discoverability of the answer?

@oliviertassinari In my opinion, having more diverse versions of demos on the demo page of <Select /> component. Although honestly, I've recently started using material-ui so still need to get used to the docs.

Shrikant9 on 5 Mar 2019

🎉2

@Shrikant9 We would be happy to accept a pull request 👍.

oliviertassinari on 5 Mar 2019

👍2

@oliviertassinari thank you my friend, you helped me very very very much. I know material ui well enough, but I couldn’t come to this decision