Carbon: Inline dropdown shouldn't dynamically resize options

Created on 16 Jun 2020  路  2Comments  路  Source: carbon-design-system/carbon

What package(s) are you using?

  • [x] carbon-components
  • [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.

The user

Is this issue related to a specific component?

Dropdown with type inline.

What did you expect to happen? What happened instead? What would you like to

That the dropdown entry point size is dynamic but not the size of the options.

see changed?

Inline dropdown's option's width has a minimum width instead of matching the width of the top.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

No.

Steps to reproduce the issue

  1. Open storybook: https://react.carbondesignsystem.com/?path=/story/dropdown--inline
  2. Take note of the the last option and how many letters are shown to the user.
  3. Select any option EXCEPT THE LAST.
  4. Try to go through options and notice that the last option is more cut of because now the entire dropdown is resized to match the selected item

Exaggerated Sandbox example: https://codesandbox.io/s/ancient-framework-mhel3?fontsize=14&hidenavigation=1&theme=dark

Additional information

  • Screenshots or code

image

  • Notes
dropdown dev 馃 bug 馃悰

All 2 comments

@carbon-design-system/design It Seems like we should specify a min-width on the dropdown menu. Right now it is just set to width: 100% so that when you choose a small item, the entire menu is shrunk to match the field.

Here is an example if we set a max-width: 250px as a possible solution.

Screen Shot 2020-06-16 at 1 26 19 PM

We could try setting a 288px max width for these.

Was this page helpful?
0 / 5 - 0 ratings