Additional insert of empty `<div>` tag is throwing off my CSS element sizing. about svelte-headlessui HOT 6 CLOSED

Thanks.

The empty div tags come from the transitions--each <Transition> and <TransitionChild> component renders exactly one div. In the React/Vue versions you have the ability to do as={Fragment} to not render anything and have the transition classes applied to the child component, but that's impossible to do directly in Svelte and would need some kind of more elaborate workaround (like exposing a prop getter or maybe for transitions an action which you could apply). At that point I'm not sure the increase in complexity is worth it.

The main downside is just when converting Tailwind UI snippets, I think. In cases where they use as={Fragment} you might need to pull some of the CSS classes up to the <Transition> / <TransitionChild>. In your case, try adding a class= prop to the problematic transition and duplicating or replacing some of the classes there.

Looking at your snippet, if the problematic element is the <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-indigo-700">, you can just remove that div and move all of its classes to the parent <TransitionChild>.

from svelte-headlessui.

Can you share the relevant code?

from svelte-headlessui.

@rgossiaux Yes, working on it.

from svelte-headlessui.

https://pastebin.com/3A258fyz

from svelte-headlessui.

@rgossiaux This is a simplified version of a side bar from Tailwind UI. Make sure you are in response mode for a smaller screen sm: and you will see that the generated <div class = " ">. This sidebar should be full height of screen a fill out wider.

from svelte-headlessui.

@rgossiaux Cool, thanks! I had the feeling that was gonna be the case but I wanted to check in before I committed. Thanks again for your awesome work.

from svelte-headlessui.