Control popover location anchor for SelectField
I actually faced the same issue.
I don't think it's possible, at least it's not part of configurable properties. I looked at SelectField source, and apparently, even though SelectField
is using DropDownMenu
underneath, and DropDown
is using PopOver
underneath, but the configuration of anchorOrigin
is hardcoded.
https://github.com/callemall/material-ui/blob/master/src/DropDownMenu/DropDownMenu.js#L9
const anchorOrigin = {
vertical: 'top',
horizontal: 'left',
};
It is possible indeed:
<SelectField dropDownMenuProps={{anchorOrigin:{vertical:"center",horizontal:"left"}}}>
<MenuItem value={1} primaryText="one" />
<MenuItem value={2} primaryText="two" />
<MenuItem value={3} primaryText="three" />
</SelectField>
If you need to exactly set up the positioning of your "popover" (which is actually a "dropdown menu"), I reckon you can try by overriding one of the different (style?) props of that menu: http://www.material-ui.com/#/components/dropdown-menu ("Properties" part)
An other way would be to use a popover instead...
Also, the new v1.0 beta just had its select component released ; it might give you a better control: https://material-ui-1dab0.firebaseapp.com/demos/selects/