Hello,
Losing my sanity here with a simple issue. It only happens when there are validation errors. Any ideas?
Tried all of the alignment utilities for both Grid and Flexbox.
(simplified)
<div class="grid grid-cols-12 items-center gap-4">
<div class="col-span-4">
<InputLabel for="a" value="Field A" />
<TextInput class="block w-full" placeholder="Foo" />
<InputError message="Lorem ipsum dolor sit amet." />
</div>
<div class="col-span-4">
<InputLabel for="b" value="Field B" />
<TextInput class="block w-full" placeholder="Foo" />
<InputError message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique." />
</div>
<div class="col-span-4">
<InputLabel for="c" value="Field C" />
<TextInput class="block w-full" placeholder="Foo" />
<InputError message="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, similique." />
</div>
</div>
Here's the InputError
component:
<span v-if="message" class="text-sm text-red-600">
{{ message }}
</span>
It's always the simple issues, huh.