UI/UX flickering on a list of items

Hi all I made a list consisting of a label text wrapping on some input element so it's way easier to click on the items, there should be a checkbox to the left side, the text right beside the checkbox and to the right end a delete icon, the delete icon only appears once you hover on an element, but the problem is that anytime I hover I see a rapid flickering on all items and I just don't like that. I made an example here: https://play.tailwindcss.com/RZuNpVWXxe so you can look at the HTML structure.

Looking for suggestions on how to get rid of it and give it a better treatment, it really makes it look "cheap" in my opinion, Im looking to make it more pleasant to navigate.

Here's how it looks at the moment, https://imgur.com/AWV6M8t

tykus

4 years ago

Level 104

Set an appropriate height on the icon to constrain it to the existing line-height

I don't know how you're handling the show/hide functionality currently; but know that Tailwind has group and group-hover classes that can make this happen in CSS. You can also add a transition and opacity to make the appearance/disappearance of the icon less jarring (less cheap):

<li class="flex items-center mb-1 cursor-pointer group">
    <!-- -->
    <span class="flex justify-end items-center w-full opacity-0 transition-opacity duration-200 group-hover:opacity-100">
</li>

This also means that the icon is there just transparent... its height is already contributing to the height of the container.

Please or to participate in this conversation.