Layout of form inside livewire component not working
I'm trying to add a form inside a livewire component, but the columns just do not seem to co-operate with me...
This is the schema:
As you can see in the image there is an additional empty column generated.
I checked the html that gets printed and it is the following:
The classes
Can it be that I must configure something in tailwind for it to render properly?
This is the schema:
$form
->schema([
TextInput::make('name')->required()->columnSpan(1),
TextInput::make('surname')->required(),
TextInput::make('phone')
->columnSpanFull(),
TextInput::make('email')->email()
->columnSpanFull(),
])
->columns(2)
->statePath('shipping');$form
->schema([
TextInput::make('name')->required()->columnSpan(1),
TextInput::make('surname')->required(),
TextInput::make('phone')
->columnSpanFull(),
TextInput::make('email')->email()
->columnSpanFull(),
])
->columns(2)
->statePath('shipping');As you can see in the image there is an additional empty column generated.
I checked the html that gets printed and it is the following:
<div style="--cols-default: repeat(1, minmax(0, 1fr)); --cols-lg: repeat(2, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] lg:grid-cols-[--cols-lg] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'baCZW3ia3kfG83hsAfwG') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})"><div style="--cols-default: repeat(1, minmax(0, 1fr)); --cols-lg: repeat(2, minmax(0, 1fr));" class="grid grid-cols-[--cols-default] lg:grid-cols-[--cols-lg] fi-fo-component-ctn gap-6" x-data="{}" x-on:form-validation-error.window="if ($event.detail.livewireId !== 'baCZW3ia3kfG83hsAfwG') {
return
}
$nextTick(() => {
let error = $el.querySelector('[data-validation-error]')
if (! error) {
return
}
let elementToExpand = error
while (elementToExpand) {
elementToExpand.dispatchEvent(new CustomEvent('expand'))
elementToExpand = elementToExpand.parentNode
}
setTimeout(
() =>
error.closest('[data-field-wrapper]').scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start',
}),
200,
)
})">The classes
grid-cols-[--cols-default] lg:grid-cols-[--cols-lg] grid-cols-[--cols-default] lg:grid-cols-[--cols-lg] seem a bit sus.Can it be that I must configure something in tailwind for it to render properly?
