Ok I think this time I got it. Here : https://Telumire.github.io/TiddlyTweaks/index.html#:%5B%5BCombobox%5D%5D
Le jeudi 4 novembre 2021 à 23:17:51 UTC+1, Télumire a écrit : > > @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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/c3fe7c16-affd-428e-8ccb-f72d55f0bc50n%40googlegroups.com.
Combobox.tid
Description: Binary data
