title: material ui select component dropdown positioning
body: <p>for some reason Menuprops attribute is not working for me and i am not able to change position of drop down box. Please see my code i am doing exactly same as discussed on other related questions.</p>
  <p>I want the Menuitmes dropdown box to appear just below the select Input Box and same width as the input box.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import MenuItem from &quot;@material-ui/core/MenuItem&quot;;
  import FormControl from &quot;@material-ui/core/FormControl&quot;;
  import Select from &quot;@material-ui/core/Select&quot;;
  import Grid from &quot;@material-ui/core/Grid&quot;;
  import { IconButton, InputAdornment, OutlinedInput } from &quot;@material-ui/core&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      // padding: &quot;10px&quot;,
      width: &quot;100%&quot;,
    },
    formControl: {
      // minWidth: 120,
      // width: '90%',
      display: &quot;flex&quot;,
      flexDirection: &quot;row&quot;,
      alignItems: &quot;center&quot;,
      &quot;&amp; .MuiSelect-select&quot;: {
        fontSize: &quot;12px&quot;,
        textAlign: &quot;left&quot;,
        //padding: &quot;6px 10px&quot;,
      },
      &quot;&amp; .MuiInputBase-root&quot;: {
        height: &quot;45px&quot;,
        borderRadius: &quot;5px&quot;,
      },
    },
    placeholderValue: {
      color: &quot;#9F9F9F&quot;,
    },
    selectBox: {
      flex: 1,
    },
    selectEmpty: {
      flex: 1,
      marginTop: theme.spacing(2),
      background: &quot;#fff&quot;,
      borderRadius: &quot;22px&quot;,
      padding: &quot;3px&quot;,
      textAlign: &quot;center&quot;,
      &quot;&amp;:before, &amp;:after,&amp; .MuiSelect-icon&quot;: {
        display: &quot;none&quot;,
      },
      &quot;&amp; .MuiSelect-select:focus&quot;: {
        background: &quot;transparent&quot;,
      },
    },
    Icon: {
      color: &quot;#26a0c9&quot;,
      marginRight: 5,
    },
    inputlabel: {
      fontSize: &quot;12px&quot;,
      fontWeight: &quot;bold&quot;,
      lineHeight: &quot;1.33&quot;,
      color: &quot;#7d7d7d&quot;,
      marginBottom: &quot;10px&quot;,
      display: &quot;block&quot;,
    },
    isRequired: {
      color: &quot;#ff0000&quot;,
      marginLeft: &quot;5px&quot;,
    },
  }));
  
  export default function SelectComp(props) {
    const classes = useStyles();
    const { StartIcon } = props;
  
    const handleChange = (event) =&gt; {
      props.handleChange(event);
    };
  
    return (
      &lt;Grid container alignItems=&quot;flex-end&quot; className={classes.root}&gt;
        &lt;Grid item xs={12}&gt;
          &lt;label htmlFor={props.name} className={classes.inputlabel}&gt;
            {props.label}
            {props.isRequired ? (
              &lt;span className={classes.isRequired}&gt;*&lt;/span&gt;
            ) : (
              &lt;&gt;&lt;/&gt;
            )}
          &lt;/label&gt;
          &lt;FormControl
            variant=&quot;outlined&quot;
            className={classes.formControl}
            disabled={props.isDisable ? props.isDisable : false}
          &gt;
            &lt;Select
              value={props.value ? props.value : &quot;&quot;}
              onChange={(e) =&gt; handleChange(e)}
              // displayEmpty={props.displayEmpty || true}
              className={`${
                props.module === &quot;timeline&quot;
                  ? classes.selectEmpty
                  : classes.selectBox
              } ${props.className}`}
              inputProps={{ &quot;aria-label&quot;: props.label }}
              name={props.name}
              startAdornment={
                props.StartIcon ? (
                  &lt;InputAdornment position=&quot;start&quot;&gt;
                    &lt;StartIcon /&gt;
                  &lt;/InputAdornment&gt;
                ) : (
                  &lt;&gt;&lt;/&gt;
                )
              }
              MenuProps={{
                anchorOrigin: {
                  vertical: &quot;bottom&quot;,
                  horizontal: &quot;left&quot;
                },
                getContentAnchorEl: null
              }}
            &gt;
              {!props.value &amp;&amp; (
                &lt;MenuItem value={&quot;&quot;} className={classes.placeholderValue}&gt;
                  {props.placeholder}
                &lt;/MenuItem&gt;
              )}
              {props.options &amp;&amp;
                props.options.map((data) =&gt; {
                  return (
                    &lt;MenuItem value={data.value} key={data.value}&gt;
                      {data.label}
                    &lt;/MenuItem&gt;
                  );
                })}
            &lt;/Select&gt;
          &lt;/FormControl&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  }
  
  </code></pre>