Need help with unusual behavior with tc-popup in template wiki

,
#1

I am reviving an old project of mine to build a template tiddlywiki with some custom CSS, and one of the issues I had that I ended up not finding a solution to, was the strange placement of popups from dropdown menus.

The best example I can give is to give a link to my template wiki, and when the sidebar is open, click the more button, and then the palette button, and you’ll notice the popup will be very distant from the original dropdown.

This happens with all of the dropdown menus, and I’m not entirely sure what is causing it. I assume it is something to do with one of the stylesheets I’ve made?

#2

The problem is due to CSS in $:/themes/jmh/archivistic/base/default/Dropdowns.

Specifically:

/* Dropdown Container */
.tc-drop-down,
{
...
max-height: 300px;
overflow-y: auto;
}

If you remove the max-height:300px; (or set max-height:auto;) – so that .tc-drop-down displays no longer scroll – you will see that the nested “palette” popup position is actually correct relative to the unscrolled position of the “palette” menu button.

Unfortunately, there isn’t an easy fix that also retains the max-height style on the containing .tc-drop-down element.

For example, you can make the nested popup position responsive to the scroll offset by adding position:relative; to the .tc-drop-down CSS rules. However, this will have the undesirable side-effect of restricting the nested popup display to be displayed within the containing .tc-drop-down popup with scrollbars appearing rather than overflowing the containing popup.

If you can live with the max-height:auto “fix”, that is probably the best you can do to address this issue.

-e

#3

That’s a bit of a bummer.
In earlier versions I didn’t see this, so I was wondering if something with the way dropdowns and popups changes, but if somehow I was just getting lucky then, I guess I’ll just need to use max-height auto.
None the less, I appreciate the help :grinning_face_with_smiling_eyes:

#4

Can this be addressed using a z-index?

#5

I’m not sure, and I revisited the old version I had initially remembered working, and after a bit of testing, it has the same behavior.

So, I’m just going to use height auto :man_shrugging: