[TW5] CSS to pop over tiddler titles

[TonyM]

Folks,

I am working on a TiddlyWiki menuing solution. I have some great menus that dropdown on hover. Only for some reason they always go under the below tiddler title if it reaches that far.

I have tried using     z-index: 1; or 2 in a number of places with no luck.

Interestingly a menu placed above the topleftbar will popover the tiddler titles,  but a menu placed abovestory will not. 

This is also the case for a menu in a tiddler, it fails to popover the tiddler title below.

I think the problem has something to do with the TiddlyWiki page layout and CSS

Thanks in advance

Tony

[coda coder]

Tony

Did you try stupid-big z-index settings?

What is hosting the menu?  A tiddler?

Is it online somewhere?

[TonyM]

I will try super big z index so far only 1 and 2

The menu is activated with a macro in Tiddlers including via view template and/or sidebar tabs, topleftbar etc...

Tony

[TonyM]

No online yet, soon.

[TonyM]

Z-index of 100 in multiple places not working.

It is not so quick for me to get this online, I may add this to my buglist unless anyone knows something about how the CSS works for Tiddler titles.

Thanks

Tony

[coda coder]

Regular TW popups have a z-index of 1000 and certainly pop OVER tiddler titles.  To fully understand z-index, you need to understand "stacking contexts".

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

[TonyM]

Thanks Coda,

I did not realise how much stacking can occur. I expect I should try 999 to allow alerts to remain visible.

550 but not 500 works in this case

Thanks.

[Ton Gerner]

Hi Tony,

When you inspect $:/themes/tiddlywiki/vanilla/base you will see 13 times z-index has been used (with sometimes high values).

Below summarized the class that uses a z-index + the value used:

class	z-index
.tc-tiddler-dragger	-10000
.tc-dropzone.tc-dragover:before	10000
.tc-plugin-reload-warning	1000
.tc-topbar	1200
.tc-block-dropdown	1000
.tc-modal-wrapper	900
.tc-modal-backdrop	1000
.tc-modal	1100
.tc-notification	1300
.tc-tab-buttons.tc-vertical	100
.tc-alerts	20000
.tc-static-alert-inner	100
.tc-tabbed-table-of-contents .tc-table-of-contents	100

Cheers,

Ton

[@TiddlyTweeter]

FWIW, I find this subject interesting. Why? Because it illustrates something about the "Sociology of Programming".

My general impression is that z-index is often used in a BIG NUMBERS way. Practically, when you want something always foregrounded most often one thinks of a big number when testing. I start at 1,001. Bad practice, but its widely done.

On SHARED code bases that can be problematic and frustrating for careful folk like you.

Just a thought: an INDEX of Z-INDEXES used in base TW might be useful?

Best wishes
Josiah

[@TiddlyTweeter]

Ciao Ton

You just gave the data that I thought could be useful! Great stuff.

J.

[@TiddlyTweeter]

I just posted an issue on Github about this as I can't find those indices in documentation.

https://github.com/Jermolene/TiddlyWiki5/issues/3092

Best wishes
Josiah

On Wednesday, 17 January 2018 11:11:02 UTC+1, Ton Gerner wrote:

[PMario]

On Wednesday, January 17, 2018 at 11:14:23 AM UTC+1, @TiddlyTweeter wrote:

FWIW, I find this subject interesting. Why? Because it illustrates something about the "Sociology of Programming".

That's an interesting point of view. ... But I think there's a much more pragmatic reason.

The general rule is: Try to avoid z-index. Only use it, if there is no better way.

The code will be much easier to maintain without them.

Sometimes z-indizes can't be avoided, so the programmer chooses a value around 100. There is enough space for others to be above and below.

10 isn't sensible, since there are only 10 values (0..9) left. If you need lower priority, you'll need to start to use negative numbers, which introduces a new "mental model" eg: -1 is highger priority than -2 ...

High numbers are used, if you "really really" want an element to stick on top. eg: 10000 or -10000

Around 4 digits it's pretty save, that others don't overwrite your intentions by accident. They may also start at 100 and find out, if that's enough or not.

BUT

The primariy rule is: Try to avoid z-index, except it's needed or it improves animation performance (google is your friend here ;).

have fun!

mario

[@TiddlyTweeter]

Right. But I'm not so sure that is what is happening in practice.

Part of the issue in TW is lack of a public index of the already used indices. Yes?

J.

[TonyM]

Thanks Tom that will be a good reference.

I had assumed there would be values between -1 and 5, how wrong was I

Tony

[PMario]

On Wednesday, January 17, 2018 at 12:28:29 PM UTC+1, @TiddlyTweeter wrote:

Right. But I'm not so sure that is what is happening in practice.

Part of the issue in TW is lack of a public index of the already used indices. Yes?

Yea. if  the frist sentence in the docs is: DON'T mess around with z-index if you don't need to. It will make maintenance a nightmare.

-m

[@TiddlyTweeter]

Right. But to do that you gotta see the numbers.

-j