USelect > document how to make items/options content width, fit the longest item/option width. Add an image example.

[emelendez]

You can change the content width globally using your app.config.ts:

export default defineAppConfig({
  ui: {
    select: {
      slots: {
        content: 'min-w-fit'
      }
    }
  }
})

Originally posted by @benjamincanac in #4300

please,
document in its page:
https://ui.nuxt.com/components/select

also, consider to add access to "content" through "ui" prop to make it, not only globally, but particularly available.
Now you can't do:

<USelect :ui="{ content: 'min-w-fit' }" ... />

I had to search hard to find my own answer, and I think it's a very important case for everyone. It will benefit us all.
Thank you in advance!

[J-Michalek]

also, consider to add access to "content" through "ui" prop to make it, not only globally, but particularly available.
Now you can't do:
<USelect :ui="{ content: 'min-w-fit' }" ... />

@emelendez Could you please be more specific about what does not work with this example? I've checked and the Select component does accept content field in the ui prop.

[emelendez]

@emelendez Could you please be more specific about what does not work with this example? I've checked and the Select component does accept content field in the ui prop.

@J-Michalek You're completly right! It was my fault. I didn't read "; ... 19 more ...;" in prop ':ui' documentation so I missed "content" (and 18 more slots...).

BUT I think it would be a great idea to add a subsection in that doc page about "how items width fit its own text length..." making use of these two possibilities: globally in app.config.ts or particularly in <USelect :ui="{ content: 'min-w-fit' }" ... />