How to fix the Width of Select component in UI Kit 2 (v10)

Forge Forge UI Kit and Custom UI
1

Hi,

Currently its width is auto based on the width of the selected Option, which is different from that in previous version. I want to fix the width based on the width of the widest Option just as before. Anyone knows how to implement it?

<Select xcss={selectStyle} >
  const selectStyle = xcss({
    minWidth: '300px',
  });

Thanks,
YY1

2

Hey @YY1,

Select currently doesn’t support xcss, which is why your example isn’t working, but you can use it within the Box element, for example:

    <Box xcss={{ width: "100px" }}>
      <Label labelFor="default-appearance-example">Favourite fruit</Label>
      <Select
        inputId="default-appearance-example"
        appearance="default"
        options={[
          { label: "Apple", value: "a" },
          { label: "Banana", value: "b" },
        ]}
      />
    </Box>

I hope that helps.

3 Likes
3

Perfect @mpaisley

1 Like