FluentUI React v9 Combobox - Unable to set component width
P粉823268006
P粉823268006 2023-09-01 15:34:55
0
1
591
<p>Is there some way to specify the width of a Fluent UI Combobox component (@fluentui/react-components)? </p> <p>For other input elements, you can use the <code>style={{width: "123px"}}</code> setting (but not sure if this is the recommended way), but this will not work with Combobox . < /p>
P粉823268006
P粉823268006

reply all(1)
P粉392861047

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

So change the width of the Combobox, depending on what you want to achieve.

If you just want it to be bigger, you can simply increase this minimum 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 root element's min-width and then set the width of the underlying input element (in this case, 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 style-Prop, you can also use css classes (a 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',
        },
    },
})
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template