Black Friday Super Sale!
Limited Time 50% OFF for All-Access Plans
Save 50% Now
KTSelect Issue with long option text
Issue with long option text in single select
If a select contains an option with a very long text, the behavior is inconsistent between the dropdown and the selected state:
- In the dropdown, the option text is truncated.
- Once the option is selected, the select expands to occupy all the available space, eventually overflowing outside of its container.
This issue does not occur when the select is configured with
multiple="true", because in that case the CSS wraps the content correctly.Example
Single select (problematic behavior)
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="kt-form-label max-w-56">Example Long Selected Option</label>
<select name="long_option" class="kt-select" data-kt-select="true">
<option value="">Placeholder</option>
<option value="long">
Example Example Example Example Example Example Example Example Example
Example Example Example Example Example Example Example Example Example
</option>
</select>
</div>Multiple select (expected behavior)
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="kt-form-label max-w-56">Example Long Selected Option</label>
<select name="long_option" class="kt-select" data-kt-select="true" multiple="true">
<option value="">Placeholder</option>
<option value="long">
Example Example Example Example Example Example Example Example Example
Example Example Example Example Example Example Example Example Example
</option>
</select>
</div>It would be great to have the same wrapping or truncation behavior applied consistently to the single select as well.
Replies (1)
Hi
Thank you for the suggestion. We will fix this issue for this week's update.
Thanks
