CODEWITHSUNDEEP
reactjsmaterial-ui
Nandu Kalidindi
Nandu Kalidindi

Reputation: 6280

Unable to set width less than 84px for Material UI <IconMenu />

I have tried various styling methods but the Dropdown menu does not seem to decrease in width. It is fixed at 84px no matter how much I try to decrease. It however behaves correctly if I set the width to more than 100px. I even tried to set minWidth on the menuStyle which seem to getting applied to the respective div.

Should I consider something else or is there a workaround to do this? Any leads would be greatly helpful. I am using material-ui version 0.15.4enter image description here

import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import Divider from 'material-ui/Divider';
import Download from 'material-ui/svg-icons/file/file-download';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

class Example extends React.Component {
  render() {
    return (
      <IconMenu
        iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
        anchorOrigin={{horizontal: 'left', vertical: 'top'}}
        targetOrigin={{horizontal: 'left', vertical: 'top'}}
        menuStyle={{width: "25px", minWidth: "25px"}}
      >
        <MenuItem key="1" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="2" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="3" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="4" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="5" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="6" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="7" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
        <MenuItem key="8" style={{height: "5px", marginBottom: "20px"}} leftIcon={<Download />} />
      </IconMenu>
    )
  } 
}

Upvotes: 0

Views: 761

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58573

Just add this lines to css

div[role=presentation] {
  width: 50px !important;
}

WORKING DEMO

Upvotes: 1

Related Questions