hjk789
Domain Toggles Jumping In List Due To Showing/Hiding Description Field
Right now if I have a list of domains I want to temporarily enable/disable for example Google domains I will click the toggle button and move down the list clicking. However, because the description field is displayed on mouseover if it's empty the next toggle button below will jump up as the field is hidden from the previous toggle. This makes the mouse no longer hovering over where the toggle was expected to be. The only workaround to prevent this UI behavior is to click toggles working upwards on the list.
Can the description field be moved to the left of the row so that the row heights are not expanding and collapsing thus keeping the toggles where they are expected when hovering over them?
I moved the input box below the domain to make it mobile friendly, so I can't move it back. There are three possible ways to solve this:
- Make the input box always take space, this way the positionings don't change on hover, but the list gets unnecessarily long to scroll;
- Make the toggle switch vertically centered, making it harder to misclick;
- Make two layouts, one for mobile and another for PC.
You shouldn't need two layouts, just create a responsive design such that if the row is more than a specific width then place the field on the left, if smaller then place it below. You should be able to do this just with CSS, but can use JS as well.
That's what I meant, a conditional style depending on the amount of screen space.
The input box could be moved to the left when the right-aligned option is enabled.