Here's the code to push the dropdown in the proper place :
<span class="combobox">
<$select field=selection class="select-btn" >
<option value='cities'>A Tale of Two Cities</option>
<option value='science'>A New Kind of Science</option>
<option value='dice'>The Dice Man</option>
</$select>
<$edit-text field=selection placeholder="type or select"/>
</span>
<style>
.combobox{
position:relative;
display:inline-block;
width:150px;
}
.combobox input{
z-index:1;
position:absolute;
left:0;
width:100%;
opacity:1;
}
.combobox .select-btn{
position:absolute;
left:0;
width:calc(100% + 20px);
}
</style>
Le jeudi 4 novembre 2021 à 16:20:39 UTC+1, Mat a écrit :
> Thanks Eric. I also have other ways of achieving the end result, but with
> the direct editing of currentTiddler fields in TW 5.2.0 I thought I had
> come across a very simple solution for a simple combobox.
>
> However, some further experimenting shows that the lost focus was easily
> solved by just removing the placeholder reference to edited field. Not even
> sure what I was thinking (why should it refer to there?). Also unnecessary
> with the selectwidget default stuff.
> Thus the remaining two problems are:
>
> 1) When the <option> tag has a value, this is what is shown in the editor.
> 2) The popup should be pushed to the left but I can't find the css
> selector for it! A less elegant workaround is to simply put the (still
> styled) SelectWidget before the EditTextWidget, so the button is to the
> left of the editor.
>
>
>
> And here's the simplified code. When used you see the problems.
>
> <$edit-text field=selection placeholder="type or select"/>
> <$select field=selection class="select-btn" >
> <option value='cities'>A Tale of Two Cities</option>
> <option value='science'>A New Kind of Science</option>
> <option value='dice'>The Dice Man</option>
> </$select>
>
> <style>
> .select-btn {width:19px; margin-left:-4px;}
> </style>
>
>
> On Thursday, November 4, 2021 at 3:30:09 PM UTC+1 Eric Shulman wrote:
>
>> On Thursday, November 4, 2021 at 4:38:55 AM UTC-7 Mat wrote:
>>
>>> I just came up with a simple idea for how to create comboboxes.
>>> Basically it is an EditTextWidget just before the SelectWidget and the
>>> select widget is styled to only show the arrow and both widgets refer to
>>> the same field.
>>>
>>
>> My `<<edit-list>>` macro initially use a similar approach, but I found
>> that it had too many problems with both interaction and appearance. I also
>> wanted to support use of inline lists (where the listbox is visible below
>> the input fied), multiple selection (using standard shift-click/ctrl-click
>> interaction), confirmation of input (ok/cancel), progressive filtering
>> (reducing the list choices to only those that contain the current edit
>> field input), and integration with my popup Calendar for selecting and
>> formatting date input (see
>> https://tiddlytools.com/timer.html#TiddlyTools%2FTime%2FCalendar) .
>>
>> The result still uses an underlying edit-text and select widget, but they
>> are surrounded by a bunch of custom wikitext code to handle lots of options
>> and use-cases.
>>
>> Check it out here: https://tiddlytools.com/edit-list.html
>> To see it in action, view
>> https://tiddlytools.com/edit-list.html#TiddlyTools%2FMacros%2Fedit-list%2FExamples
>>
>> enjoy,
>> -e
>>
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/29f1c9b5-f571-4f76-abf3-69eda4d9bc00n%40googlegroups.com.
