Constraint Select width for long item

[thewebartisan7]

What is best way to constraint select width? I am using Radix themes, and I see that the trigger has text-overflow ellipsis so I could just set a width to it like

.rt-SelectTriggerInner {
      max-width: 150px;
}

Is there a better way like some prop or css variable to do this?

Thanks

[vladmoroz]

a. Use layout components:

<Box width="150px">
  <Select.Root>...</Select.Root>
</Box>

b. Use inline styles

<Select.Root>
  <Select.Trigger style={{ width: 150 }} />
  ...
</Select.Root>

I wouldn't recommend to target the internal CSS classes because the implementation may change in future versions. See these guides on Layout and Styling for more detail.

[thewebartisan7]

Thanks, solution A looks better to me, however I have to use the Flex since I am inside a Flex and the Box for some reasons doesn't get aligned horizontally even if parent Flex has align center.

[vladmoroz]

Thanks, solution A looks better to me, however I have to use the Flex since I am inside a Flex and the Box for some reasons doesn't get aligned horizontally even if parent Flex has align center.

Yeah wrapping with a Flex is common too, you are seeing the default CSS behaviour with inline element alignment

[thewebartisan7]

Sorry but it seems doesn't works using the Box nor Flex, when I first time tested I still had my custom styles.

The problem is that Flex nor Box has overflow hidden and even with fixed width the select trigger is being shown. I tried to use overflowX hidden but then select arrow is hidden.

<Box width="100px" overflowX="hidden">
                        <Select.Root>
                            <Select.Trigger />
                            <Select.Content>
                                ...
                            </Select.Content>
                        </Select.Root>
                    </Box>

Is there another solution or have to use inline style?

For me is not suitable inline style as I need to set max width only on small screen, which I can do with Box but not with inline style.

[vladmoroz]

I see, try to asChild into the Trigger to pass the width of the layout component to it:

<Select.Root defaultValue="1">
  <Flex maxWidth="100px" asChild>
    <Select.Trigger />
  </Flex>
  <Select.Content>
    <Select.Item value="1">Lorem ipsum dolor sit amet</Select.Item>
    <Select.Item value="2">Consectetur adipscing elit</Select.Item>
  </Select.Content>
</Select.Root>

[thewebartisan7]

Nice trick, thanks! This works even with Box.