Make the width of the dropdown list different from the width of the dropdown button

Question

I would like to realize a dropdown, where the width of the dropdown button is not necessarily equal to the width of the dropdown list.

I know that we can use style={{ minWidth: '200px' }} to control the width of the dropdown button and dropdown list. Now, I would like to make the width of the dropdown list 500px.

I tried to set .fui-Listbox { width: 500px } in the stylesheet, but it did not work.

Does anyone know how to do that?

StackBlitz: https://stackblitz.com/edit/react-ts-cejuzs?file=App.tsx,style.css,index.html

import {
  FluentProvider,
  webLightTheme,
  makeStyles,
  shorthands,
} from '@fluentui/react-components';
import {
  Dropdown,
  Option,
  DropdownProps,
} from '@fluentui/react-components/unstable';
import { TextField } from '@fluentui/react';
import * as React from 'react';
import './style.css';

export default class Grouped extends React.Component<{}, {}> {
  land = ['Cat', 'Dog', 'Ferret', 'Hamster'];

  render() {
    return (
      <FluentProvider
        className="fluent-provider"
        style={{ display: 'flex' }}
        theme={webLightTheme}
      >
        <Dropdown
          className="drop-down"
          style={{ minWidth: '200px' }}
          placeholder="Select an animal"
        >
          {this.land.map((option) => (
            <Option key={option}>{option}</Option>
          ))}
        </Dropdown>
      </FluentProvider>
    );
  }
}

Edit 1: Following pier farrugia's answer, I tried to use .fui-Listbox { width: 500px !important; }. It did make the width of the dropdown list 500px, however it impacted all the dropdowns in the project, which is not what I want. I tried to add classes and wrote selectors such as .drop-down .fui-Listbox { width: '500px' !important; } and .drop-down-2 .fui-Listbox { width: '100%' !important; }, but it did not work. I guess it's because under the mode of dropdown, .fui-Listbox is not a child class of drop-down-2 or .fluent-provider-2. Does anyone know how to properly write the selectors to limit the impact only to the dropdown I target?

https://stackblitz.com/edit/react-ts-51hiro?file=App.tsx,style.css,index.html

score 0 · Answer 1 · answered Jan 14 '23 at 08:35

0

in the code you have :

<Dropdown
          className="drop-down"
          style={{ width: '100px' }}
          placeholder="Select an animal"
        >

Your style 100px is generated dynamically.

Change in style even with !important is not working.

Modify the the line

style={{ width: '100px' }}

to

style={{ width: '500px' }}

answered Jan 14 '23 at 08:35

pier farrugia

1,520
2
2
9

Are you sure this is what I'm after? – SoftTimur Jan 14 '23 at 08:47
you asked list 500px, I tried in your stackblitz, that works there. Try in your stackblitz, you'll see – pier farrugia Jan 14 '23 at 09:26

score 0 · Answer 2 · answered Feb 19 '23 at 00:02

To change only the width of the dropdown list, you have to use the style or the className tag for that specific dropdown slot (listbox):

    <Dropdown
      className="drop-down"
      style={{ minWidth: '200px' }}
      placeholder="Select an animal"
      listbox={{style: {width: "500px"}}}
    >
      {this.land.map((option) => (
        <Option key={option}>{option}</Option>
      ))}
    </Dropdown>

or if you want to keep using your stylesheet

    <Dropdown
      className="drop-down"
      style={{ minWidth: '200px' }}
      placeholder="Select an animal"
      listbox={{className: "custom-dropdown-width"}}
    >
      {this.land.map((option) => (
        <Option key={option}>{option}</Option>
      ))}
    </Dropdown>

and in your stylesheet

.custom-dropdown-width {
  width: '500px' !important;
}

Make the width of the dropdown list different from the width of the dropdown button

2 Answers2