How to expand select dropdown width?

[anwarenrique]

Hello! Is it possible to expand the width of the drop down from select elements? Some of my select options are wider than the width of the select dropdown. I don't want them to be truncated, and ideally, I would increase the width of the select drop down instead of wrapping the select options. Is this possible? I have been modifying the data-te-class-dropdown but to no avail. Any help would be super appreciated. And thanks again for your support to everyone on this board!

the current code:
<select data-te-select-init class="h-12 w-12 font-roboto rounded-3xl text-base font-bold bg-[#CACACA]" name="sort" id="sortSelect" onchange="this.form.submit()" data-te-class-select-label="!ml-4 pointer-events-none absolute top-0 left-3 mb-0 max-w-[90%] origin-[0_0] truncate text-gray-500 transition-all duration-200 ease-out peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-gray-200 dark:peer-focus:text-gray-200 data-[te-input-state-active]:scale-[0.8]" data-te-class-notch-leading="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none left-0 top-0 h-full !w-6 border-r-0 rounded-l-full group-data-[te-input-focused]:border-r-0 group-data-[te-input-state-active]:border-r-0" data-te-class-notch-trailing="pointer-events-none border border-solid box-border bg-transparent transition-all duration-200 ease-linear motion-reduce:transition-none grow h-full border-l-0 rounded-r-full group-data-[te-input-focused]:border-l-0 group-data-[te-input-state-active]:border-l-0" > <option hidden selected></option> <option value="yearDecreasing"> Year Published (increasing) </option> <option value="yearIncreasing"> Year Published (decreasing) </option> <option value="createdAtDecreasing"> Date posted (decreasing) </option> <option value="createdAtIncreasing"> Date posted (increasing) </option> <option value="likes">Likes</option> <option value="comments">Comments</option> </select> <label data-te-select-label-ref class="text-navblack">Sort</label>

[juujisai]

Hello! You can add a width class to the data-te-class-dropdown attribute. For example add w-[500px] class:

<select
    ...
data-te-class-dropdown="w-[500px] relative outline-none min-w-[100px] m-0 scale-[0.8] opacity-0 bg-white shadow-[0_2px_5px_0_rgba(0,0,0,0.16),_0_2px_10px_0_rgba(0,0,0,0.12)] transition duration-200 motion-reduce:transition-none data-[te-select-open]:scale-100 data-[te-select-open]:opacity-100 dark:bg-zinc-700"
    ....

[anwarenrique]

Thanks so much!