F
Filament•2d ago
AntV

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: 
$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] seem a bit sus. Can it be that I must configure something in tailwind for it to render properly?
No description
1 Reply
AntV
AntVOP•2d ago
I dug a bit into the generated css, it does seem there is an issue, as the generated classes are like this: 
.grid-cols-\[--cols-default\] {
    grid-template-columns: --cols-default;
  }
.lg\:grid-cols-\[--cols-lg\] {
    @media (width >= 64rem) {
      grid-template-columns: --cols-lg;
    }
  }
.grid-cols-\[--cols-default\] {
    grid-template-columns: --cols-default;
  }
.lg\:grid-cols-\[--cols-lg\] {
    @media (width >= 64rem) {
      grid-template-columns: --cols-lg;
    }
  }
and not 
.grid-cols-\[--cols-default\] {
    grid-template-columns: var(--cols-default);
  }
.lg\:grid-cols-\[--cols-lg\] {
    @media (width >= 64rem) {
      grid-template-columns: var(--cols-lg);
    }
  }
.grid-cols-\[--cols-default\] {
    grid-template-columns: var(--cols-default);
  }
.lg\:grid-cols-\[--cols-lg\] {
    @media (width >= 64rem) {
      grid-template-columns: var(--cols-lg);
    }
  }

Did you find this page helpful?