@Eric Shulman my bad, I should have tested it a bit more. Thanks for
pointing this out ! @Mat, this is because the select element is OS
dependent according to this stack overflow answer :
https://stackoverflow.com/a/1895485/11549574
This one can be used properly inline (with a text after and before) and use
a pseudo element as a select button (I left it as a red square but it's
easy to customize), but there is still an issue with vertical align.. I'm
still sharing it just in case, if I find something better I'll post it :
<$vars
height="20px"
>
<style>
.combobox{
position: relative;
display: inline-block;
width: 150px;
height:<<height>>;
background:red;
margin-right:20px;
}
.combobox .select-btn{
width:100%;
cursor:pointer;
opacity:0;
pointer-event:all;
}
.combobox input{
top:0;
position:absolute;
width:100%;
}
.combobox .drodown-btn{
width:calc(<<height>> + 100%);
top:0;
position:absolute;
cursor:pointer;
}
.combobox .drodown-btn:after{
display:block;
content:"";
width:calc(<<height>> + 4px);
position:absolute;
inset:0 0 0 auto;
background:red;
pointer-events: none;
}
</style>
BEFORE<$edit-text field=selection placeholder="type or select"/>AFTER
before
<span class="combobox">
<span class="drodown-btn">
<$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>
</span>
<$edit-text field=selection placeholder="type or select"/>
</span>
after
Le jeudi 4 novembre 2021 à 22:48:23 UTC+1, Mat a écrit :
> @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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/6758f58e-51ab-4dc6-b679-7c6ea406fb76n%40googlegroups.com.
