CODEWITHSUNDEEP
javascriptmaterial-ui
Jack
Jack

Reputation: 951

material ui select - add horizontal scroll to dropdown menu

In my project I am using material ui Select component and the problem is that dropdown contents is very long and does not fit in.

Pic

For these purposes I need to add a horizontal scroll to dropdown menu. I tried adding property OverflowX to menuProps and to sx props but it did not work. Any ideas how to fix the issue?

Codesandbox

Upvotes: 1

Views: 7476

Answers (2)

Bojan Tomić
Bojan Tomić

Reputation: 1085

Problem is this part of the code.

const MenuProps = {
autoFocus: false,
//OverflowX: "scroll",
PaperProps: {
  style: {
    //maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
    width: 250,
    OverflowX: "scroll"
  }
}
};

width and overflowX, so you were really close the styling is correct just fix width and overflow.

const MenuProps = {
autoFocus: false,
//OverflowX: "scroll",
PaperProps: {
  style: {
    //maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
    width: "250px",
    overflowX: "scroll"
  }
}

};

Upvotes: 0

Pratik Wadekar
Pratik Wadekar

Reputation: 1274

Added a codesandbox link. You can check the solution here.

https://codesandbox.io/s/selectautowidth-demo-material-ui-forked-8yl3n9?file=/demo.js

Upvotes: 2

Related Questions