How to limit the width of select widget if the text in the dropdown in lengthy

2

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 $select control will be limited to a width of 10em, but the drop-down that is shown when the $select is 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-text widget is limited to 10em by the same shortlist CSS class.
  • The contents of each $button in the popup is wrapped in a div that limits it’s width to 8em to account for the padding around the popup itself, and also uses overflow:hidden;text-overflow:ellipsis; to automatically truncate the button text if it would otherwise overflow that 8em limit.
  • The $edit-text contents are EDITABLE, so it is possible to enter a value that does not appear in the list!

enjoy,
-e