My goal is to create a dropdown where the width of the button is different from the width of the list. I am aware that we can adjust the widths using inline styling like style={{ minWidth: '200px' }}. Now, I want to set the width of the dropdown list to 500px.
I attempted adding .fui-Listbox { width: 500px } in the stylesheet, but it didn't have the desired effect.
Is there a way to achieve this?
Check out the StackBlitz here: 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: In response to pier farrugia's suggestion, I tried using
.fui-Listbox { width: 500px !important; }.drop-down .fui-Listbox { width: '500px' !important; }.drop-down-2 .fui-Listbox { width: '100%' !important; }.fui-Listbox is not considered a child class of drop-down-2 or .fluent-provider-2. Can anyone provide guidance on correctly targeting specific dropdowns without affecting others?
Visit the updated StackBlitz here: https://stackblitz.com/edit/react-ts-51hiro?file=App.tsx,style.css,index.html