Form Fields Styling Issues
Closed this issue · 1 comments
VibingCreator commented
Describe the bug
<div class="flex space-x-4">
<Form.Field {form} name="firstName">
<Form.Control>
{#snippet children({ props })}
<Input {...props} bind:value={$formData.firstName} placeholder="First name" />
{/snippet}
</Form.Control>
<Form.FieldErrors class="pb-4" />
</Form.Field>
<Separator orientation="vertical" class="h-[40px]" />
<Form.Field {form} name="lastName">
<Form.Control>
{#snippet children({ props })}
<Input {...props} bind:value={$formData.lastName} placeholder="Last name" />
{/snippet}
</Form.Control>
<Form.FieldErrors class="pb-4" />
</Form.Field>
</div>
Reproduction
Put form fields within a div container as shown above and it will show issues like this. Doesn't even have to be styled.
Logs
No response
System Info
System:
OS: Windows 10 10.0.19045
CPU: (16) x64 AMD Ryzen 7 1800X Eight-Core Processor
Memory: 22.12 GB / 31.93 GB
Binaries:
Node: 20.18.0 - ~\AppData\Local\Volta\tools\image\node\20.18.0\node.EXE
npm: 10.8.2 - ~\AppData\Local\Volta\tools\image\node\20.18.0\npm.CMD
Browsers:
Edge: Chromium (127.0.2651.74)
Internet Explorer: 11.0.19041.4355
npmPackages:
@sveltejs/kit: ^2.0.0 => 2.8.0
formsnap: ^2.0.0-next.1 => 2.0.0-next.1
svelte: ^5.0.0 => 5.1.13
sveltekit-superforms: ^2.20.0 => 2.20.0
zod: ^3.23.8 => 3.23.8
Severity
annoyance
huntabyte commented
I'm not sure what I'm looking at. Formsnap doesn't provide any styles