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/adee8669-f8c4-43d2-81b7-4462f4f67f19n%40googlegroups.com.
combobox_style.tid
Description: Binary data
