Thanks Télumire using your exact styling tiddler, but with an added type:text/css this is how it appears <https://combobox.tiddlyhost.com/>, i.e om my Win 10 machine using Chrome, Brave and Firefox I see a selectwidget but no visible button and you can't type into it. Same thing on my android phone, Brave browser. Does my page not appear like that on your machine? BTW, on your webpage, the combobox tiddler is folded and on my phone I can't access the unfold button.
<:-) On Sunday, November 14, 2021 at 3:27:46 AM UTC+1 Télumire wrote: > > Hi @Mat, the apostrophes are intended, they prevent the wikitext parsing > to convert the -- into – (the wikitext cant be disabled with a pragma rule > or a content type in thatcase because this would prevent the use of > widgets). > > Drag & drop this tiddler in your wiki and it should work fine (it does on > my end in a fresh tiddlywiki) :) > > > > Le dimanche 14 novembre 2021 à 00:09:51 UTC+1, Mat a écrit : > >> @Télumire - I now tried to copy your code but it doesn't work properly. >> I've tried both from your attached tid file and using the copy-to-clipboard >> feature on your webpage but the code seems buggy e.g the -- prefix on css >> variables are enclosed in apostrophes. >> >> This is what I get >> <https://combobox.tiddlyhost.com/#:Combobox%20%5B%5BA%20styled%20combobox%5D%5D%20%5B%5BA%20quick'n%20dirty%20combobox%5D%5D>, >> >> i.e the "Combobox" tiddler is your downloaded attachment tid above, and in >> the tiddler "A styled combobox" I've tweaked some stuff so it basically >> works but the button arrow is not showing. >> >> What am I doing wrong or missing? >> >> Thanx >> >> <:-) >> 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 tiddlywiki+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f171ebb5-2739-462c-8b68-a65ee4543da7n%40googlegroups.com.
