After moving a task, the three-dots menu appears behind other tasks #11831

[joefessenden]

Fixes #11831

Changes

Removed position entry from .task.

ce29fa61-66d8-45f8-9d9c-ea5ef876c35f

UUID: ce29fa61-66d8-45f8-9d9c-ea5ef876c35f

[paglias]

Hi @joefessenden , this is working well but I think a part of the original bug is not completely solved. If you swap the position of two tasks (in the screenshot the g and i) then the menu of the moved task appears behind the other one

[joefessenden]

@paglias ok. I see it. Let me have another look.

[ryeleo]

I will give this a look 👍

[Alys]

@terminalstderr Thanks! I've marked issue #11831 as in progress for you. If you have any questions or run into trouble, drop a comment into the issue.

[ryeleo]

I got through setting up a local dev environment, and have read much of the blacksmith documentation now 😁👍

I haven't figured out how to actually 'log in' to my local dev environment yet... I'd appreciate a tip/pointer here!

[Alys]

@terminalstderr Have a look at the Setting up Habitica Locally page for your operating system. The sections from "Start the Habitica Web Server" onwards are probably the most important sections for you now, and jump down to "Test the Website in your Browser" if the site already seems to be working correctly. That should give you all the information you need about using the site and logging in, but if it doesn't help, please post again here! If any of it is unclear or doesn't work, tell us which parts so we can improve it. (BTW, if you run into any other issues, the rest of that page might help too - check that you've done everything described there.)

[ryeleo]

For some reason, I thought I needed to set up an account from the backend (e.g. via Mongo or via the API). Now I realize that I can just setup an account from the GUI using the 'sign up' button. 🤦‍♂️

My misunderstanding did give me a nice chance to dip my toes into MongoDB, and I'm excited to help out on backend issues going forward 😁

[ryeleo]

I'm pretty novice at web frontend technologies... However, over the weekend I figured out the root-cause at least!

Let's discuss in the context of an example:

• Make a TODO list containing only a, b, and c.
• Drag the top item to the bottom
  • Repeat until you are back in your original order.
• Click on the dropdown menu for a
  • Ensure that the menu is fully visible to the user. ❌(failed)
  • 

Okay, so we've got an example and we know what it looks like.

Root-cause Discussion

The stacking order of the tasks implies that the DIVs that proceed a (i.e. b then c) will be placed on top of a since they come after a. Since the dropdown menu is part of the a DIV, then a's dropdown menu also respects the stacking order, so is shown behind b and c.

To fix this, the z-index needs to be set to ever-descending values down the list. This is exemplified in this screenshot:

Notice that anytime that the list is rearranged will require re-setting the z-indexes. Otherwise, we end up with results like the following screenshot:

The fix

I'm not really sure to start with implementing a fix for this honestly. The whole Vue framework is very new to me. I'll continue plugging away at this, but also, I'd love to work with someone if they have the knowledge to help me implement this!

[paglias]

@terminalstderr great investigation! I haven't looked at the code exactly but I'm thinking that the z-index of the 3-dots menu is linked to the task it belongs to, probably because it's a children of the task element. I'm wondering if we could solve this by having position:absolute on the 3 dots menu and an high enough z-index so that it becomes independent from the task element

[ryeleo]

@paglias, hmm, I'm unsure how I would use absolute positioning for the dropdown menus. We'd either have to:

• Arrange the HTML so that the dropdown menu div occurs before all of the task div, then is absolutely positioned within the column (no need to manipulate z-index in this case I think), OR
• Remove any 'stacking context creation' inside of the task-list, so that the dropdown menu and the tasks share the same stacking context. Then we can simply statically set the z-index for the dropdown menu to higher than the tasks.
  • Per MDN The Stacking Context - "Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context."
  • My understanding of this statement is that stacking contexts are like encapsulated containers... I'm not sure I fully understand the concept... 🤷‍♂️

[paglias]

Sorry @joefessenden , I meant position: relative not absolute but if we manage to get this working just by changing the order of the html elements it would be great!

[ryeleo]

I'm going to see if I can pinpoint which element in the task is creating a new stacking context. The z-index will work if we can fix the stacking context debacle.

Another Option
I guess we could move the dropdown out of the 'task' and into the 'column', and do some dynamic styling to set its position properly in the list.

• Is this is a good practice?
• Is there is a clean way to implement this sol'n?

[paglias]

I would prefer to first try fixing the z-index, we can revisit other options if that doesn't work

[ryeleo]

Thanks to the z-context Chrome plugin, it is simple to identify where in the DOM new stacking context(s) are being created.

Sure enough, there is a stacking context created on the 'task-wrapper' div.

I am struggling to figure where the relevant CSS is in the habitica code-base that is causing the attribute style="transform: translateZ(400px);" to appear on the div. Can someone identify where in the codebase this attribute is being applied? Knowing 'Why?' would also be great to know, cuz I'm hoping to remove it! 👍

P.S. I think I saw one other stacking context to remove to implement the simplest solution.

[paglias]

that transform probably comes from Bootstrap Vue that we use to show the dropdown

[ryeleo]

Thanks @paglias! That makes so much sense.

Time for me to start understanding Vue, Bootstrap, and BootstrapVue.

[ryeleo]

This issue is going to fix itself 👏😁

The dropdown-menu will no longer appear behind the prior-dragged tasks when the 10.1.2 release of Sortable is integrated into Vue.Draggable!

• See SortableJS Bug: "#1644: Remove transform on drop"

Looks like my work here is done! 🙌🎉🍻 (the PR can be abandoned in my opinion)

[paglias]

thanks for the investigation @terminalstderr ! The Vue.Draggable module (which uses SortableJS) specifies version ^1.10.1 which also includes 1.10.2 with the bug fix but for some reason it never got updated. I've re-installed it and now it's using the correct version of SortableJS e90175b#diff-7cf4eeba842ee397ed48f38c03eaadb0R17798

[paglias]

I'm going to close the PR

[Alys]

@terminalstderr Can you please tell us your Habitica User ID? We'll give you contributor credit for your investigation and for finding the fix. Knowing that we needed to update a library was valuable!

[ryeleo]

My Habitica User ID is "rleonard". I really appreciate your being so on-top of issue-comments and pull-request-comments! Thanks @Alys!

[Alys]

@terminalstderr Thanks! Welcome to the ranks of the Blacksmiths! :)

For our reference, User ID is 6d3f823a-38aa-40d7-9cc3-a52ec7bda21f in case your Username ever changes. :)

[Alys]

A thank-you message from @KGHN in RaB:

"I want to thank whoever fixed the bug that's been bugging me. After a task had been moved up/down in the task list, its three-dots menu display of choices would hide behind other tasks below. I just found it correctly displaying and working, hooray! I have a non+/- "task" that I use as a divider. It starts at the top in the morning, and I move it down as I complete tasks so I can find my place easily in the long list. At the end of the day, "To top" is handy. Whoever fixed this has my gratitude!"