@Télumire, I appreciate your effort! @Eric, thank you for your shrewd
analysis!
Does anyone know why it is barely possible to manipulate this dropdown
though? I do get the following to work, so the options *are* targettable:
.select-btn option {background:red}
...but attempting to e.g position absolute, margin-left, or some such
fails. It is as if they are immune to most styling.
@anyone - is this because of the SelectWidget implementation, or is it the
underlying html select / option tags? Surely people will want to style
these? If it indeed is the underlying html tags, then is it at all possible
to do something about it in the SelectWidget, hypothetically?
Thanx!
<:-)
On Thursday, November 4, 2021 at 9:42:29 PM UTC+1 Eric Shulman wrote:
> On Thursday, November 4, 2021 at 12:31:14 PM UTC-7 Télumire wrote:
>
>> Here's the code to push the dropdown in the proper place :
>>
>
> There are layout problems with this solution. To see the issues,
> try putting "before" and "after" text surrounding the "combobox" span:
>
>
>> *BEFORE*<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>*AFTER*
>
>
> and compare this with the result of showing only an $edit-text widget:
>
> *BEFORE*<$edit-text field=selection placeholder="type or select"/>*AFTER*
>
> For the simple inline $edit-text widget, the BEFORE/AFTER text appears as
> you would expect:
> immediately preceding/following the input element and vertically aligned
> with the middle of the text
>
> However, note the placement and vertical alignment of the "combobox"
> elements:
> The edit input/select elements appear vertically aligned *below the
> baseline *of the surrounding BEFORE/AFTER text,
> and the AFTER text is immediately following the input element, rather than
> following the select element.
>
> The CSS you provided also assumes that the width of the select element's
> downarrow button will always
> a fixed width of "20px", which may not be the case depending upon which
> browser you are using.
>
> Also, there is also a slight difference in the height of the select
> element vs the edit element (testing with Chrome),
> so that the bottom border of the select element, which is behind the edit
> element, is visible, creating the appearance
> of a double-thick bottom border on the edit element
>
> -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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/d74b6106-f668-40e7-9471-7cd0e705fd41n%40googlegroups.com.
