Thanks @Mat! Sure, go ahead :) Le ven. 5 nov. 2021 à 08:51, Mat <[email protected]> a écrit :
> @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 > <https://groups.google.com/d/msgid/tiddlywiki/2b0e65a7-7f03-4445-bcec-4dc19eb4933bn%40googlegroups.com?utm_medium=email&utm_source=footer> > . > -- 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/CADf1GS%3Ds8YKkh6hhm7K%2BUfJ58scJF9M85zBaL21FietXwgmFug%40mail.gmail.com.
