I have problem with createOptionForm and columnSpan, not working correctly check screenshot.

should be half / half and not like screenshot and my code look like this

Forms\Components\Select::make('customer_id')
    ->label(('lang.customer'))
    ->relationship('customer', 'name')
    ->searchable()
    ->createOptionForm([
        Forms\Components\TextInput::make('name')
            ->label(('lang.name'))
            ->required()
            ->columnSpan(['default' => '2']),
        Forms\Components\TextInput::make('email')
            ->label(('lang.email'))
            ->required()
            ->email()
            ->unique(Customer::class, 'email', ignoreRecord: true),
        Forms\Components\TextInput::make('phone')
            ->label(('lang.phone'))
            ->required(),
        Forms\Components\TextInput::make('street')
            ->label(('lang.street')),
        Forms\Components\TextInput::make('street_number')
            ->label(('lang.street_number')),
        Forms\Components\TextInput::make('postal_code')
            ->label(('lang.postal_code')),
        Forms\Components\TextInput::make('city')
            ->label(('lang.city')),
        Forms\Components\TextInput::make('password')
            ->password()
            ->label(('lang.password'))
            ->dehydrateStateUsing(fn ($state) => Hash::make($state))
            ->dehydrated(fn ($state) => filled($state))
            ->required(fn (string $context): bool => $context === 'create')
            ->confirmed(),
        Forms\Components\TextInput::make('password_confirmation')
            ->password()
            ->label(('lang.confirm_password'))
            ->required(fn (string $context): bool => $context === 'create')
    ])

Forms\Components\Select::make('customer_id')
    ->label(('lang.customer'))
    ->relationship('customer', 'name')
    ->searchable()
    ->createOptionForm([
        Forms\Components\TextInput::make('name')
            ->label(('lang.name'))
            ->required()
            ->columnSpan(['default' => '2']),
        Forms\Components\TextInput::make('email')
            ->label(('lang.email'))
            ->required()
            ->email()
            ->unique(Customer::class, 'email', ignoreRecord: true),
        Forms\Components\TextInput::make('phone')
            ->label(('lang.phone'))
            ->required(),
        Forms\Components\TextInput::make('street')
            ->label(('lang.street')),
        Forms\Components\TextInput::make('street_number')
            ->label(('lang.street_number')),
        Forms\Components\TextInput::make('postal_code')
            ->label(('lang.postal_code')),
        Forms\Components\TextInput::make('city')
            ->label(('lang.city')),
        Forms\Components\TextInput::make('password')
            ->password()
            ->label(('lang.password'))
            ->dehydrateStateUsing(fn ($state) => Hash::make($state))
            ->dehydrated(fn ($state) => filled($state))
            ->required(fn (string $context): bool => $context === 'create')
            ->confirmed(),
        Forms\Components\TextInput::make('password_confirmation')
            ->password()
            ->label(('lang.confirm_password'))
            ->required(fn (string $context): bool => $context === 'create')
    ])

Solution:

Ok. So wrap all of the form schema in a Group::make([…fields])->columns()

Jump to solution

20 Replies

awcodes•2mo ago

Please follow the #✅┊rules about formatting code examples.

Mstrihi•2mo ago

sorry I will format the code and submit again

awcodes•2mo ago

Just edit it. No need to submit again. 😃

Mstrihi•2mo ago

done 🙂

Mstrihi•2mo ago

I guess the problem with the wrapper

awcodes•2mo ago

You should look at the docs for layout components. Still looks odd though that the grids aren’t two equal columns. So, something else other than the code you shared is throwing it off. https://filamentphp.com/docs/3.x/forms/layout/getting-started

Getting started - Form Builder - Filament

awcodes•2mo ago

Also, undocumented, for some reason is a Group layout component that will probably help with this layout.

Mstrihi•2mo ago

Just note this pronlem happen only in createOptionForm and not if using schema

awcodes•2mo ago

Yea. Something is off. But I’m not seeing anything obvious based on what you shared.

Mstrihi•2mo ago

if I remove ->columnSpan(['default' => '2']) is showing full column for each input

Mstrihi•2mo ago

same issue if you do this in demo https://github.com/filamentphp/demo

GitHub

GitHub - filamentphp/demo: Source code for the demo.filamentphp.com...

Source code for the demo.filamentphp.com website. Contribute to filamentphp/demo development by creating an account on GitHub.

awcodes•2mo ago

What is your expected outcome? 2 columns, 5 columns. Etc.

Mstrihi•2mo ago

this from demo as well

Mstrihi•2mo ago

I want to have half / half 2 columns per row but equal width

Solution

awcodes•2mo ago

Ok. So wrap all of the form schema in a Group::make([…fields])->columns()

Gaming

Programming

I have problem with createOptionForm and columnSpan, not working correctly check screenshot.