DropIndicator

[gwokwong]

It seems like you're experiencing positioning issues with the DropIndicator component after integrating the board into your project, which uses Tailwind CSS. Here's how you might express this concern in English:

"I have integrated the 'board' into my project, which utilizes Tailwind CSS, and I'm encountering positioning issues with the 'DropIndicator' component. Could you help me troubleshoot this problem?"

If you need further assistance with the technical aspects or code related to this issue, feel free to provide more details, and I'll do my best to help you resolve it.

https://github.com/user-attachments/assets/dc59dcc3-6b73-4968-b45c-9fa35dc05b7b

`import type { Config } from 'tailwindcss'

const config: Config = { content: [ './src/pages//*.{js,ts,jsx,tsx,mdx}', './src/components//.{js,ts,jsx,tsx,mdx}', './src/app/**/.{js,ts,jsx,tsx,mdx}', ], theme: { extend: { fontFamily: { sans: ['Inter, sans-serif', { fontFeatureSettings: '"cv11"' }], }, }, }, plugins: [], } export default config "@atlaskit/pragmatic-drag-and-drop": "^1.3.1", "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0", "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.1", "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3", "@atlaskit/pragmatic-drag-and-drop-live-region": "^1.0.7", "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.2", `

[gwokwong]

"I'm wondering if the styles from Tailwind CSS are impacting the positioning of my DropIndicator component."

[michaelabrahamian]

Hey @gwokwong , there shouldn't be any blocking problems with using TailwindCSS to style your drop indicator. We have an example using Tailwind that you can reference, if that helps:

https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/drop-indicator.tsx

For reference, you can find examples in other tech stacks here: https://atlassian.design/components/pragmatic-drag-and-drop/examples#simple-list-on-other-stacks

[dantheother]

~I don't have a solution, but~ I've hit the same problem. I'm not using tailwind. I literally copied everything from the board.tsx example and supporting files, installed the required libraries. The drop indicator appears in the middle of the card, not above or below it.

edit If this is the same as card.tsx from the demo, the problem is the gap. I've not dived too deeply into it.

Changing the DropIndicator gap to a simple hardcoded "5px" fixed the issue for me. I'm guessing something isn't setup correctly to use token. It's not killing me, this is just a proof of concept, hardcoded 5px works for now.

<!-- this results in a centered drop indicator like OP -->
<DropIndicator edge={closestEdge} gap={token('space.100', '0')} />

<!-- this results in a nice drop indicator. The best drop indicator in any system I've ever seen IMHO -->
<DropIndicator edge={closestEdge} gap="5px" />

[michaelabrahamian]

Ah interesting, nice investigation Dan! That could be it. There are some additional steps required to use ADS tokens: https://atlassian.design/get-started/develop#set-up-your-bundling-environment (in particular, the babel plugin)