I want to limit the width of select widget to maximum two words so that if the text in the dropdown in lengthy, the text either wraps on to the next line or only two words are shown maximum
To limit the width of a $select widget, you need to define a CSS class.
For example, something like this:
<style> .shortlist { max-width:10em; overflow:hidden; text-overflow:ellipsis; } </style>
<$let items="item1 [[item2 is long text like this]] item3 [[item4 is also long text like this]] item5">
<$select field="test" class="shortlist">
<$list filter="[enlist<items>]"><option><<currentTiddler>></option></$list>
</$select>
Notes:
- The
$selectcontrol will be limited to a width of10em, but the drop-down that is shown when the$selectis clicked will still be as wide as needed to show the full text of the widest item. This dropdown is rendered by the browser itself, so we can’t control how it appears.
Another possible solution is to use an $edit-text widget with an associated “popup”, like this:
<$let popid=<<qualify "$/state/popup/test">>>
<$edit-text field="test" class="tc-popup-handle shortlist" focusPopup=<<popid>>/>
<$reveal type="popup" state=<<popid>> class="tc-drop-down" style="min-width:auto;">
<$list filter="[enlist<items>]" variable="item">
<$button class="tc-btn-invisible" actions="<$action-setfield test=<<item>>/>">
<div style="max-width:8em;overflow:hidden;text-overflow:ellipsis;">
<$text text=<<item>>/>
</div>
</$button>
</$list>
</$reveal>
Notes:
- The width of the
$edit-textwidget is limited to10emby the sameshortlistCSS class. - The contents of each
$buttonin the popup is wrapped in a div that limits it’s width to8emto account for the padding around the popup itself, and also usesoverflow:hidden;text-overflow:ellipsis;to automatically truncate the button text if it would otherwise overflow that8emlimit. - The
$edit-textcontents are EDITABLE, so it is possible to enter a value that does not appear in the list!
enjoy,
-e
4 Likes
If you like dot-dot-dot… try this in your class:
select.narrow-select {
max-width:8em;
overflow-x:hidden;
text-overflow:ellipsis;
}
3 Likes
Thankyou @EricShulman for your solution with detailed explanations. I will try this shortly. I am not sure whether I can use the edit-text solution in my usecase since there can be issue with loss of focus if I use it within a let or parameters widget.
@CodaCoder Thank you for your tip 
ooh! that’s a nice touch. I’ve edited my previous reply to add overflow:hidden; text-overflow:ellipsis; to the class definition of .shortlist.
-e
2 Likes
Plus, with <select> you get keyboard actions as “standard”. There’s a lot to be said for sticking to browser-native solutions for the base use cases. Less “technical debt”, and all that…
You’re absolutely right about “sticking to browser-native solutions for the base use cases”.
Nonetheless, it you DO want to provide an “editable combo box” (a combination of $edit-text and $select features), you could use something like this:
<style> .shortlist { max-width:10em; overflow:hidden; text-overflow:ellipsis; } </style>
<$let items="item1 [[item2 is long text like this]] item3 [[item4 is also long text like this]] item5">
<$let popid=<<qualify "$/state/popup/test">>>
<$edit-text field="test" class="tc-popup-handle shortlist" focusPopup=<<popid>>/>
<$reveal type="popup" state=<<popid>>>
<$select field="test" class="shortlist" size={{{ [enlist<items>count[]max[2]] }}}>
<$list filter="[enlist<items>]">
<option class="shortlist"><<currentTiddler>></option>
</$list>
</$select>
</$reveal>
Note how this time the popup contents are using a $select widget instead of the $list of $buttons that my previous example used. This enables the ability to use browser-native “keyboard actions”… as you have correctly pointed out.
enjoy,
-e
2 Likes
I did one of those a while back. I recall you posted something like that before, too. I think you had a clear button on the right, bumped left by ~20px which I stole and use a lot. Works with native select too - provided you supply a kbd equivalent:
<option></option>
Topic’s starting to wander 