Minimal css: a fix for dropdown popup hidden by position sticky title

Developers
#1

While working on my minimal css stylesheet for tiddlywiki, I ran into an issue while testing sticky titles:

image
image883Ă—739 85 KB

The default behavior for elements without a set z-index is to stack in the order they appear in the DOM. Since the sticky element creates its own stacking context, any absolutely positioned children are constrained to this context and appear behind subsequent content.

image
image1165Ă—626 156 KB

The way tiddlywiki solve this is by forcefully setting z-index with very high numbers on each tiddlers, using a list widget :

image

Well thanks to “:has”, this is not necessary anymore :

.tc-tiddler-frame:has(.tc-drop-down:not([hidden])){
        z-index:1;
}

image
image698Ă—735 70.4 KB

image
image1153Ă—635 153 KB

And voila, we are a step closer to removing wikitext/JavaScript from the CSS stylesheet!

So far, this approach seems to be working, but I have a couple of questions:

  • Could this cause issues in specific cases?
  • Do you know of any other (better?) solutions?

EDIT:

Future solutions :

1 Like
#2

I dont have the skills to validate the approach but a solution is welcome.

I do think such a change needs to be concidered along side the overall page template because I have seen similar artifacts in other places, where the z-index is insufficient to correct it.

  • perhaps the same needs to be applied elsewhere?
  • could this change result in new artifacts?
  • what about when the z-index has being used by custom solutions or plugins to overcome current issues will they cause problems if you apply this fix.

@telumire thanks for your contribution here!

#3

Intuitively, I would say that this shouldn’t cause any issues, since usually when we set a z-index, it’s to layer something above another element. Therefore, this should not disrupt the layout, but it would be a good idea to test this extensively … I will try applying this to the original TiddlyWiki website instead of using the current fix to see if it causes any noticeable issues.

EDIT: so far so good, but let me know if you find a case where it doesnt work !

I won’t make a pr for this because tiddlywiki aim to support old browsers, but maybe it will be usefull for a future version of tiddlywiki

#4

Is a new stylesheet tiddler containing;

.tc-tiddler-frame:has(.tc-drop-down:not([hidden])){
        z-index:1;
}

Sufficient to implement and test this?

#5

yes but if you enable sticky titles the z-index will be set manually on the next tiddlers and this wont work, unless you use a z-index of 201 (max z-index = 200)

Alternatively, you can edit “$:/themes/tiddlywiki/vanilla/sticky” with this:

<$reveal state="$:/themes/tiddlywiki/vanilla/options/stickytitles" type="match" text="yes">
``
.tc-tiddler-title {
	position: -webkit-sticky;
	position: -moz-sticky;
	position: -o-sticky;
	position: -ms-sticky;
	position: sticky;
	top: 0px;
	background: ``<<colour tiddler-background>>``;
    z-index: 1;
}

.tc-tiddler-frame:has(.tc-drop-down:not([hidden])){
        z-index:2;
}
``
</$reveal>

edit: .tc-tiddler-title need a z-index otherwise the content of the tiddler might get above the title

#6

I found an issue:

image

This is because of this:

image

So to be safe, maybe it would be best to use a high z-index, something like 10000 should be enough.

Note that the same issue can be seen on the official tiddlywiki website even without my approach, maybe I should make a PR …

image
image1244Ă—486 123 KB