2

Is there some way to specify width of the Fluent UI Combobox component (@fluentui/react-components)?

For other input elements it can be set using style={{width: "123px"}} (not sure if that's the recommended way though), but that does not work with Combobox.

Bohdan
  • 1,987
  • 16
  • 23

1 Answers1

0

style={{width: "123px"}} doesn't work, because the root element of the Combobox has a fixed min-width set to 250px.

So to change the width of the Combobox, it depends on what you want to achive.

If you just want to make it larger, you can simply increase this min-width:

<Combobox
    style={{minWidth: '800px'}}
>
    <Option>A</Option>
    <Option>B</Option>
</Combobox>

If you want to set it to a specific width, you can unset the min-width of the root element and then set the width of the underlying input element (in this example, the final width of the Combobox will be larger than 20px, because of the input-padding and the dropdown button):

<Combobox
    style={{minWidth: 'unset'}}
    input={{style: {width: '20px'}}}
>
    <Option>A</Option>
    <Option>B</Option>
</Combobox>

Edit: instead of using the style-Prop, you could also use css classes (cleaner way in my opinion):

export const ComboboxExample: FunctionComponent = () => {
    const classes = useStyles()
    return (
        <Combobox className={classes.combobox}>
            <Option>A</Option>
            <Option>B</Option>
        </Combobox>
    )
}

const useStyles = makeStyles({
    combobox: {
        minWidth: 'unset',
        '>.fui-Combobox__input': {
            width: '20px',
        },
    },
})
Thomas
  • 176
  • 1
  • 4
  • Thanks @Thomas! So the Comboboxes input prop is for passing down props to it's internal input component? Is this a common pattern? In the docs, I found just input ({ as?: "input"; } & Omit, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; }, "children"> & { ...; }), which honestly isn't very helpful :) – Bohdan Jul 03 '23 at 12:43
  • Yes, that's part of their Slots-API, which is basically the base of all the components. There are also some examples in the [docs](https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--page) for using the API. – Thomas Jul 03 '23 at 15:20