DEV Community

Discussion on: Buggy task card

Collapse
 
andy profile image
Andy Zhao (he/him)

I think I know what you're talking about with the height jittering, but not exactly sure. You'll need to elaborate on what exactly is jittering.

My first guess after a quick skim is that you're talking about the task actions appearing and disappearing really quickly. Looks like you have a mouseover event on the whole cards div <div class="cards"> that adds the <div class="actionsDiv">, and then a mouseout event that removes the <div class="actionsDiv">.

I think instead of creating the actionsDiv via JS and having events append and remove it, you could write in the actionsDiv into the HTML to begin with. Then you would use your mouseon/out events to change the CSS as necessary. See "#11: Make some content visible only for screen readers" of this post for an example.

Also, I think you might need to make your <div class="cards"> larger with some padding or margins (or something), so when you hover over it and hover your cursor into the actionsDiv, the cursor won't exit the cards div completely and hide the actionsDiv.

Hope that helps!