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•5mo ago

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

MstrihiOP•5mo ago

sorry I will format the code and submit again

awcodes•5mo ago

Just edit it. No need to submit again. 😃

MstrihiOP•5mo ago

done 🙂

MstrihiOP•5mo ago

I guess the problem with the wrapper

awcodes•5mo 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•5mo ago

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

MstrihiOP•5mo ago

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

awcodes•5mo ago

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

MstrihiOP•5mo ago

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

MstrihiOP•5mo 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•5mo ago

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

MstrihiOP•5mo ago

this from demo as well

MstrihiOP•5mo ago

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

Solution

awcodes•5mo ago

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

awcodes•5mo ago

2 columns is the default for the columns() modifier.

MstrihiOP•5mo ago

Group::make inside ->createOptionForm([ ?

awcodes•5mo ago

Yes

MstrihiOP•5mo ago

I will try it

MstrihiOP•5mo ago

that works, thank you so much for your help

Gaming

Programming

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