search

isaacHagoel / svelte-dnd-action

An action based drag and drop container for Svelte
MIT License
1.8k stars 104 forks source link

Remove outline around dragged item #612

Open R12-cookies opened 6 days ago

R12-cookies commented 6 days ago

My issue is very simple yet somehow I'am unable to solve it, I just want to get rid of the white outline around the drag item. I am not using any custom styles just tailwind classes

image
isaacHagoel commented 6 days ago

Hi, Please provide a repl and steps to reproduce.

On Mon, Oct 21, 2024, 22:25 R12-cookies @.***> wrote:

My issue is very simple yet somehow I'am unable to solve it, I just want to get rid of the white outline around the drag item. I am not using any custom styles just tailwind classes image.png (view on web) https://github.com/user-attachments/assets/eb26ce0d-9d39-4188-b6cc-15283dbf8a30

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/612, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7KDT5S3GUG77AE3XTZ4TQEBAVCNFSM6AAAAABQJ56JMWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGYYDEMRTHE3DKMI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

R12-cookies commented 3 days ago

Hi, Please provide a repl and steps to reproduce. … On Mon, Oct 21, 2024, 22:25 R12-cookies @.> wrote: My issue is very simple yet somehow I'am unable to solve it, I just want to get rid of the white outline around the drag item. I am not using any custom styles just tailwind classes image.png (view on web) https://github.com/user-attachments/assets/eb26ce0d-9d39-4188-b6cc-15283dbf8a30 — Reply to this email directly, view it on GitHub <#612>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC7KDT5S3GUG77AE3XTZ4TQEBAVCNFSM6AAAAABQJ56JMWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGYYDEMRTHE3DKMI . You are receiving this because you are subscribed to this thread.Message ID: @.>

@isaacHagoel here is the the REPL, as you will see, the draggeditems have a white outline when dragged, I assumed using 'outline-none' would solve the issue, but it didnt> thank you

isaacHagoel commented 3 days ago

The outline isn't added by the library. The browser adds it to focused items. The lib focuses on the dragged element when dragging starts. You will see the same outline if tab between items with the keyboard. You can still remove it, for example by adding:

<style>
    :global(*:focus) {
             outline: none;
          }
</style>