@Telumire - Man, that turned out quite ambitious. Looks great! Of course, we're way past "I found a way to quickly throw together a combobox", but IF one has the styles, perhaps as part of ones standard custom stylesheets, then it is only a matter applying it with @@.combobox. For the record, here's the general and simplified call:
@@.combobox <$edit-text field=selection placeholder="type or select"/> <$select field=selection> ...options list... </$select> @@ @Telumire - I put up a combobox.tiddlyhost.com for the idea. May I include your stylesheet there, obviously with credits to you and a ref to this thread? The purpose with the page is to make it findable when one needs it. (I temporarily just made that page public, it is obviously not ready for anyone to see.) <:-) On Friday, November 5, 2021 at 2:00:46 AM UTC+1 Télumire wrote: > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2b0e65a7-7f03-4445-bcec-4dc19eb4933bn%40googlegroups.com.
