Not a bug Positioning of menus and tooltips vs. the sticky header

[Steffen]

Affected version

2.0.10

XenForo tries to position tooltips such that they are never hidden by the sticky header.

They are positioned above the triggering element if there is enough space below the sticky header:



If I scroll just a few pixels further down then there isn't enough space anymore between the triggering element and the sticky header which causes the tooltip to move below the triggering element:



This is awesome!

However, the behaviour is different for menus. Menus don't take into account the sticky header and in some circumstances can be cut-off:



In the default theme of XenForo it's possible to scroll up to reveal the full menu. That works because the default XenForo theme uses a lower z-index for the header when the user has scrolled to the very top. Our own theme has always used the same z-index which is why scrolling to the top hasn't revealed the full menu. I could change this to match XenForo's implementation. But it feels a little odd.

Do you consider it a bug that XenForo menus don't take the sticky header height into account (in contrast to tooltips)? Or is this "not a bug"?

 

[Chris D]

The behaviour between tooltips and menus is actually consistent, but just the opposite.

Menus by default open out towards the bottom. Tooltips by default open out towards the top.

So, essentially, a menu will only open towards the top in the first place, if it doesn't have enough room to open below. So, if we don't have enough room to show it all below, and we don't have enough room to show it all above, then there's a bit of a stalemate there so I don't think there's exactly anything we can do here.

I think that makes sense.

Ultimately if you can adjust your style so this is no longer an issue for you (like it isn't in the default style) then that's what we'd recommend.

 

[Steffen]

I think it's fine that menus by default open out towards the bottom and tooltips by default open out towards the top. What's inconsistent is that, while determining their position, tooltips take the sticky header into account (they successfully avoid being covered by the sticky header) but menus don't. I think menus should take the sticky header into account, too. This doesn't mean that menus should never open out towards the top but if they do then they should avoid being covered by the sticky header. The result would be menus that open out towards the bottom more often (if, after taking the sticky header into account, it turns out that there is more space below than above).

For now, I'll apply the "z-index" workaround to our theme (i.e. applying two different z-index values to the sticky header depending on whether the user has scrolled to the top or not as reported by a "scroll" event handler on the document). But I think that the proposed change still makes sense.