SelectWidget Option - Maintain whitespace

#1

Is there anyway to have SelectWidget option preserve spacing?

I am generating the options by combining two variables with padding on the first so the second lines up, however in the dropdown the spacing is not maintained.

python code

myPrint(f'<option>{playerName : <21} - {playerProf}</option>')

generates:

<option>Arbus Law             - Firebrand</option>
<option>Sossal                - Harbinger</option>
<option>Saltyer               - Reaper</option>
<option>Drevarr Moonwillow    - Scrapper</option>

Displays as
image

#2

I imagine you’ll want to pad with non-breaking spaces (&nbsp;) rather than normal spaces. As a wikitext example of the kind of approach I’d use:

<$select field=test>
<$list filter="[tag[HelloThere]pad:suffix[50],[ ]addsuffix[test]]">
<option style="font-family: Courier">{{!!title}}</option>
</$list>
</$select>

produces
image

That’s a non-breaking space in pad:suffix[50],[ ], so you can copy and paste it.

You will need to use a monospace font for things to line up properly—ideally, defined in an external stylesheet tiddler and applied via a class on the select widget.

2 Likes
#3

Thank you!!     

#4

So you realy want the stored result to include the padding? See the tiddlywiki.com select widget example and set the value differently from the option display.

Here I only save the “tag name” not the modified and padded value.

<$select field=test default={{!!test}}>
<$list filter="[tag[HelloThere]]">
<option value=<<currentTiddler>> style="font-family: Courier" ><$text text={{{ [<currentTiddler>pad:suffix[50],[ ]addsuffix[test]] }}}/></option>
</$list>
</$select>

However I like to make the code easier to read with functions.

\function selection() [<currentTiddler>pad:suffix[50],[ ]addsuffix[test]join[]]

<$select field=test>
<$list filter="[tag[HelloThere]]">
<option value=<<currentTiddler>> style="font-family: Courier"><<selection>></option>
</$list>
</$select>
[TiddlyTables] with dropdown menu options and icons?
#5

Here’s a fully fleshed-out solution that combines the methods used by @etardiff and @TW_Tones with the desired goals as stated by @john.edw_gmail.com:

\function item() [{!!title}pad:suffix<maxlength>,<space>] [{!!title}get[playerprof]] +[join[ - ]]

<$let space={{{ [charcode[160]] }}} maxlength={{{ [tag[player]length[]nsort[]last[]] }}}>
<$select field=test>
   <$list filter="[tag[player]]">
      <option style="font-family:monospace" value={{!!title}}><<item>></option>
   </$list>
</$select>
</$let>

Notes:

  • Player names are titles of individual tiddlers, each tagged with player
  • Player professions are stored in the playerprof field of each player tiddler
  • space is an ASCII character using the decimal code for a non-breakable space (=160)
  • maxlength is the number of characters in the longest player name. This is used to determine the amount of padding to add to each list item
  • <<item>> is a function (filter syntax) that constructs each list item display text from the player name padded with non-breakable spaces and the corresponding player profession, joined with a dash ("-")
  • font-family:monospace uses a platform-independent fixed-width font name (“monospace”) rather than the Windows-specific “Courier” font name.
  • <option...> uses value={{!!title}} so that the target field value is just the selected tiddler title, without the additional display formatting.

enjoy,
-e

3 Likes
#6

Thanks for this tidbit