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 (7)
Hi,
We’ve released a fix for single-select so long selected text no longer overflows.
Please confirm you’re on the latest Metronic and KTUI build.
Thanks
Issues after upgrading to Metronic 9.4.4 and KTUI 1.1.5
Hi,
I upgraded to Metronic 9.4.4 and KTUI 1.1.5, but I’m experiencing several issues that were not present in version 1.1.3.
- Now the select components expand horizontally and the selected text is not truncated or wrapped, causing layout issues.
- I noticed a different behavior between the downloaded template and my project: in the official template (after running npm install) the selects behave correctly, while in my project they don’t.
- In my project, inside
kt-select-display, the selected text is wrapped in:<div class="kt-select-option-text" data-kt-text-container="true">This wrapper seems to break responsiveness. If I manually remove it, everything works correctly.
How is this possible?
Test HTML used in both environments
<div class="kt-card"> <div class="kt-card-header" > <h3 class="kt-card-title"> Preferences </div> <div class="kt-card-content grid gap-5 lg:py-7.5"> <div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <label class="kt-form-label max-w-56"> Language </label> <div class="kt-form-control grow"> <select class="kt-select" data-kt-select="true"> <option> American English American English American English American English American English American English American English American English </option> <option> Option 2 </option> <option> Option 3 </option> </select> <div class="kt-form-description">Enter your password to proceed.</div> </div> </div> <div class="flex justify-end"> <button class="kt-btn kt-btn-primary"> Save Changes </button> </div> </div> </div>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.
