1

I uploaded a sample to my github here: https://github.com/gyrevik/dropdown-width/blob/master/src/App.js

Where I'm trying to control width like this:

  <Dropdown
    styles={{width: '25px'}}
    items={inputItems}
    placeholder="Select your hero"
    checkable
    getA11ySelectionMessage={{
      onAdd: item => `${item} has been selected.`,
    }}
  />

and deployed to vercel here: https://dropdown-width.vercel.app/

I haven't found a styling approach that works yet. Thanks in advance for looking at this!

Alex
  • 51
  • 4

3 Answers3

1

As Alex mentioned you can add a fluent property on the Dropdown which will make the control fill the available horizontal space. So for OPs code:

<Dropdown
  items={inputItems}
  placeholder="Select your hero"
  checkable
  fluid
  getA11ySelectionMessage={{
    onAdd: item => `${item} has been selected.`,
  }}
/>
Thomas
  • 4,030
  • 4
  • 40
  • 79
0

I think you check Class css import.

enter image description here

Chí Thành
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 24 '22 at 09:10
  • Hi Chi. Thanks for your answer. I did find that I can control it from the browser tools as you showed. The problem is I don't know how to override it. – Alex Feb 24 '22 at 18:09
  • I think you can watch for more tips. https://www.youtube.com/watch?v=gTVpBbFWry8 – Chí Thành Feb 25 '22 at 03:30
0

It works with the fluid property.

Alex
  • 51
  • 4