Filament•11mo ago

Form in Livewire component not displaying grid

Below is the form I am trying to render, but the form is not honouring the grid columns. The form is rendering all the fields vertically as full width inputs. When I use the same structure in the admin panel, it renders as expected, but not in a frontend livewire component. Any ideas?

public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()->schema([
                    Grid::make()->columns(2)->schema([
                        TextInput::make('first_name')->label('First Name')->required()->maxLength(255),
                        TextInput::make('last_name')->label('Last Name'),
                    ]),
                ]),

                Grid::make()->columns(2)->schema([
                    TextInput::make('first_name')->label('First Name')->columnSpan(1)->nullable(),
                    TextInput::make('last_name')->label('Last Name')->columnSpan(1)->nullable(),
                ]),

                TextInput::make('email_address')->label('Email Address')->nullable(),
                TextInput::make('mobile_phone')->label('Mobile Phone')->nullable(),
                TextInput::make('address_1')->label('Address 1')->nullable(),
                TextInput::make('address_2')->label('Address 2')->nullable(),
                TextInput::make('suburb')->label('Suburb')->nullable(),
                Select::make('state')->label('State')->options([
                    'ACT' => 'ACT',
                    'NT' => 'NT',
                    'NSW' => 'NSW',
                    'QLD' => 'QLD',
                    'SA' => 'SA',
                    'Tas' => 'Tas',
                    'Vic' => 'Vic',
                    'WA' => 'WA',
                ])->nullable(),
                TextInput::make('postcode')->label('Postcode')->nullable(),
            ])
            ->statePath('data')
            ->model($this->record);
    }

public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()->schema([
                    Grid::make()->columns(2)->schema([
                        TextInput::make('first_name')->label('First Name')->required()->maxLength(255),
                        TextInput::make('last_name')->label('Last Name'),
                    ]),
                ]),

                Grid::make()->columns(2)->schema([
                    TextInput::make('first_name')->label('First Name')->columnSpan(1)->nullable(),
                    TextInput::make('last_name')->label('Last Name')->columnSpan(1)->nullable(),
                ]),

                TextInput::make('email_address')->label('Email Address')->nullable(),
                TextInput::make('mobile_phone')->label('Mobile Phone')->nullable(),
                TextInput::make('address_1')->label('Address 1')->nullable(),
                TextInput::make('address_2')->label('Address 2')->nullable(),
                TextInput::make('suburb')->label('Suburb')->nullable(),
                Select::make('state')->label('State')->options([
                    'ACT' => 'ACT',
                    'NT' => 'NT',
                    'NSW' => 'NSW',
                    'QLD' => 'QLD',
                    'SA' => 'SA',
                    'Tas' => 'Tas',
                    'Vic' => 'Vic',
                    'WA' => 'WA',
                ])->nullable(),
                TextInput::make('postcode')->label('Postcode')->nullable(),
            ])
            ->statePath('data')
            ->model($this->record);
    }

12 Replies

Dave Mack•11mo ago

I have added the duplicate First and Last fields to demonstrate the SECTION element which DOES render - it is just the GRID that doesn't.

Dave Mack•11mo ago

Ignore the issue about the field labels being hidden, that is another story...

Andrew Wallo•11mo ago

Can I see the code that you actually want for it? Not the duplicated code, etc.. that you were talking about

Dave Mack•11mo ago

Hi Andrew - The duplication I am referring to is that I have two First and Last name fields in the form. The provided code should display BOTH versions of the first and last name fields in two columns, but as you can see in the screenshot, it is only showing in one column.

Andrew Wallo•11mo ago

Can I see your Livewire component? Sorry the blade Livewire view I mean

Dave Mack•11mo ago

<div>
    <form wire:submit="edit">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals />
</div>

<div>
    <form wire:submit="edit">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>

    <x-filament-actions::modals />
</div>

Andrew Wallo•11mo ago

It shouldn’t matter but can you try the “<x-filament-panels::form>” component instead and and see if anything changes?

Dave Mack•11mo ago

No change

Andrew Wallo•11mo ago

Yeah I mean if it isn’t showing the fields in the grid then it’s a bug… Submit an issue for it on GitHub if there isn’t one already

Dave Mack•11mo ago

Thanks Andrew - just confirming, there isn’t any CSS or anything that I might be missing that gets injected when the form is in an PANEL, that isn’t included when it is just included in a regular Livewire component?

Andrew Wallo•11mo ago

No a grid in the panel should work the same for the form builder Take a look at the css in the browser of the form in the panel versus livewire and see if anything looks different that may be causing it

Dave Mack•11mo ago

Thanks for your help - I’ll have a look further and will submit a bug report if I can’t find anything

Gaming

Programming

Form in Livewire component not displaying grid