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 (5)
Hi
We’ve already released a fix so that single-select uses the same truncation behaviour as the dropdown: the selected value is wrapped in .kt-select-option-text, and the display uses min-w-0 and truncate, so long text is clipped instead of expanding the control.
Please confirm you’re on the latest Metronic / KtUI package. If overflow still happens, share a minimal HTML snippet that shows the exact parent layout (e.g. the flex / flex-nowrap container and any wrapper around the select), so we can reproduce and fix the remaining cases.
Hi,
the text is correctly wrapped across multiple lines, but the select container does not expand accordingly, so the content ends up overflowing outside of the container.
- Metronic 9.4.1
- KTUI 1.1.3
Example
<div class="kt-card-content grid gap-5 md:grid-cols-2"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <label class="kt-form-label text-mono max-w-56">Example</label> <div class="kt-form-item flex flex-col w-full"> <select class="kt-select" data-kt-select="true" data-kt-select-enable-search="true" data-kt-select-search-placeholder="Search..." data-kt-select-placeholder="-" placeholder="-" name="example" aria-inval> <option value=""> - </option> <option value="1">EXAMPLE</option> <option value="2" selected> EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE </option> </select> <div class="kt-form-message text-danger"></div> </div> </div> </div>In contrast, adding
data-kt-select-multiple="true" makes the layout behave correctly, with the selected text wrapping and the container resizing properly.Hi
Thank you for the suggestion. We will fix this issue for this week's update.
Thanks
Now it works better, however there is still an issue with the select component.
- The select does not expand correctly to fit the content.
- The selected text overflows outside of its container instead of being wrapped.
This causes layout issues, especially when the selected option contains a long text.
