UI issue with inline tags about shadcn-tag-input

[JaleelB]

Firstly, make sure you update to version 1.1.1 of the package. Version 1.1.1 corrected a styling issue I noticed. Check your package.json file to very that the version of the package is the latest one

[Codemaine]

Yea, I've confirmed it's on version 1.1.1

[JaleelB]

Yea, I've confirmed it's on version 1.1.1

OK. Send a reproduction of this error so I can better understand the context of your issue. I tried reproducing it but all instances I created have the correct styling implementation. Preferably a code sandbox or a hosted link so I can observe the dom

[Codemaine]

It's being used in a big project. Should I share how I used the component and our tailwindcss config file?

[JaleelB]

It's being used in a big project. Should I share how I used the component and our tailwindcss config file?

@Codemaine That would be helpful, so yes. I would still like you to recreate the environment outside your project to narrow down whether or not this issue was caused by something in your project. For this you can just create a simple Next.js app in a code sandbox, follow the shadcn setup guide, install and setup the package, then share the link

[Codemaine]

Sure. Here's the codesandbox link: https://codesandbox.io/p/devbox/mystifying-khorana-hhc69f?workspaceId=be20086d-945c-402b-ae8c-2b40ca5f7c9a

[JaleelB]

Sure. Here's the codesandbox link: https://codesandbox.io/p/devbox/mystifying-khorana-hhc69f?workspaceId=be20086d-945c-402b-ae8c-2b40ca5f7c9a

You aren't using the shadcn css variables in the environment. Make sure you're also using them in your project

[Codemaine]

I can confirm that I'm using the shadcn css variables in my project.

[JaleelB]

I can confirm that I'm using the shadcn css variables in my project.

@Codemaine Based on your first image, i think i know what the issue is. Do you have a live version of your app using the package? I dont think the min-width and height I included in the fix are being applied to the input in your use case. From what I can see the input is taking on the full width of the container. This is how it should be

[JaleelB]

@Codemaine Thanks. You can delete the comment now. I figured out what the issue is. Ypu are applying this min-width of 450px, which overrides the min-width that is set internally. That along with the w-full class causes the input to always be the size of the container so the tags are stacked above it. Remove that min-width and you should be fine. I see you also applying a shadow. If you just want the input to show without that outline also, just do shadow none. If you want to override the min-width, just bear in mind if you make it too large the tags will stack on top and no be inline depending on how big you make the parent container

[JaleelB]

@Codemaine I deleted the comment for you. Just follow what I said and you should be fine. Once that works, just close the issue as done

[Codemaine]

The min-width was from the demo on the landing page lmao. I removed the min-width and w-full classes, yet i'm still getting the styling issue.

[JaleelB]

The min-width was from the demo on the landing page lmao. I removed the min-width and w-full classes, yet i'm still getting the styling issue.

@Codemaine What exactly is the styling issue you're referring to then? I removed the "sm:min-w-[450px]" class from the input you showed and that solved the input not being inline. Is that not what you were referring to?

[JaleelB]

Also, update to the latest version of the package

[Codemaine]

Oh my bad. I thought the inline tags showed horizontally in the input field.