[tw5] Re: Combobox idea

[Télumire]

 
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 
> ,
>  
> 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"
>>>
>>> >
>>> 
>>> .combobox{
>>> position: relative;
>>> display: inline-block;
>>> width: 150px;
>>> 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(<> + 100%);
>>> top:0;
>>> position:absolute;
>>> cursor:pointer;
>>> }
>>>
>>> .combobox .drodown-btn:after{
>>> display:block;
>>> content:"";
>>> width:calc(<> + 4px);
>>> position:absolute;
>>> inset:0 0 0 auto;
>>> background:red;
>>> pointer-events: none;
>>> }
>>> 
>>>
>>>
>>> BEFORE<$edit-text field=selection placeholder="type or select"/>AFTER
>>>
>>> before
>>> 
>>> 
>>> <$select field=selection class="select-btn" >
>>> A Tale of Two Cities
>>> A New Kind of Science
>>> The Dice Man
>>> 
>>> 
>>> <$edit-text field=selection placeholder="type or select"/>
>>> 
>>> 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*
>
>
>> <$select field=selection class="select-btn" >
>> A Tale of Two Cities
>> A New Kind of Science
>> The Dice Man
>> 
>> <$edit-text field=selection placeholder="type or select"/>
>>
> *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" 

[tw5] Re: Combobox idea

[Mat]

@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 
,
 
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"
>>
>> >
>> 
>> .combobox{
>> position: relative;
>> display: inline-block;
>> width: 150px;
>> 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(<> + 100%);
>> top:0;
>> position:absolute;
>> cursor:pointer;
>> }
>>
>> .combobox .drodown-btn:after{
>> display:block;
>> content:"";
>> width:calc(<> + 4px);
>> position:absolute;
>> inset:0 0 0 auto;
>> background:red;
>> pointer-events: none;
>> }
>> 
>>
>>
>> BEFORE<$edit-text field=selection placeholder="type or select"/>AFTER
>>
>> before
>> 
>> 
>> <$select field=selection class="select-btn" >
>> A Tale of Two Cities
>> A New Kind of Science
>> The Dice Man
>> 
>> 
>> <$edit-text field=selection placeholder="type or select"/>
>> 
>> 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*


> <$select field=selection class="select-btn" >
> A Tale of Two Cities
> A New Kind of Science
> The Dice Man
> 
> <$edit-text field=selection placeholder="type or select"/>
>
 *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 

[tw5] Re: Bug in TW 5.2.0 in zoomin view.

[Soren Bjornstad]

This issue I was experiencing might be the same thing or related:
https://groups.google.com/g/tiddlywiki/c/7HPSS67j4uU/m/kOgsG8YQBAAJ


On Tuesday, November 9, 2021 at 10:57:29 AM UTC-6 jeremy...@gmail.com wrote:

> Hi Siniy-Kit,
>
> I can confirm the problem with v5.2.0. I also checked v5.1.23 and it seems 
> to have the same problem.
>
> Do you know when the problem was introduced? Did it indeed ever work 
> properly?
>
> Best wishes
>
> Jeremy
>
> On Tuesday, November 9, 2021 at 4:45:33 PM UTC Jeremy Ruston wrote:
>
>> Hi Siniy-Kit
>>
>> Thanks for the report, I'll investigate.
>>
>> Best wishes
>>
>> Jeremy
>>
>> On Sunday, November 7, 2021 at 9:40:19 AM UTC Siniy-Kit wrote:
>>
>>> Jeremy, help me please. I want to update my template to  new version, 
>>> but it works only with zoomin view. 
>>>
>>> четверг, 28 октября 2021 г. в 15:52:49 UTC+3, Siniy-Kit: 
>>>
 Old TW5 works good. But now it has bad auto scroll while navigating 
 between tiddlers 
 For example open this tiddler 
 https://tiddlywiki.com/#Filter%20Operators then make zoomin view
 [image: Снимок экрана 2021-10-28 154440.png]
  then go back to Filter Operators tiddler and press "range"
 [image: Снимок экрана 2021-10-28 154716.png]

 after click you will see this
 [image: Снимок экрана 2021-10-28 154853.png]

 I want to see the top of this tiddler, but it autoscroll to middle. Can 
 we fix this bug? 

>>>

-- 
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/7fdf9810-6ef8-428d-94a6-8692e5d9cf71n%40googlegroups.com.

[tw5] Re: gg VS talk

[TiddlyTweeter]

I just want add a comment. I think Eric's take is right.

On Thursday, 11 November 2021 at 17:27:28 UTC+1 Eric Shulman wrote:

> On Thursday, November 11, 2021 at 7:52:00 AM UTC-8 Mat wrote:
>
>> > Visit our new, *experimental* Discourse discussion: talk.tiddlywiki.org
>>
>
>> How long is talk.tw gonna be experimental?
>>
>
> I think the experiment has been successful.  I am inclined to remove the 
> word "experimental" from the GG header notice, so it would be listed as 
> simply another "alternative", just like the current 
> https://twitter.com/TiddlyWiki and https://www.reddit.com/r/TiddlyWiki5/ 
> links.
>  
>
>> And what's it take to prove it is better?
>>
>
> Although many (but not all) have said they now prefer 
> https://talk.tiddlywiki.org/, "better" is a matter of personal opinion.  
> I don't think it needs to be "proven" to be "better"... it's merely another 
> site for TiddlyWiki info.
>  
>
>> And what if it is better, are we gonna shut this here down then?
>>
>
> IF the frequency of posts here drops to near zero, then I would be 
> inclined to change the GG header to indicate that the discussion has 
> "migrated" to https://talk.tiddlywiki.org/, just as we have done with the 
> https://groups.google.com/g/tiddlywikidev discussion, which was moved to 
> https://github.com/Jermolene/TiddlyWiki5/discussions and has had a total 
> of 5 GoogleGroup posts since mid-June 2021.  In any case, I don't think we 
> should ever completely "shut this here down", as there are many links 
> external to this group.  As such, it will always be at least a historical 
> resource for older discussion threads.
>
> -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/32cf2339-5fbf-44e3-8257-39b9ceee50c4n%40googlegroups.com.