Filament•8mo ago

Styling forms modal forms created with createOptionsForm()

I have a modal for creating contacts, if a company does not exist, I want to be able to create on on the fly so I am using createOptionsForm() to create it in situ. I am trying to styling it rather simply but I am struggling to get it to work correctly and I am unsure if it is possible or if I am barking up the wrong tree. I have attached a screenshot and the code is below:

Select::make('company_id')
->relationship('company', 'name')
->searchable()
->preload()
->placeholder('Select a company')
->columns(12)
->createOptionForm([
    TextInput::make('name')
        ->required()
        ->maxLength(255)
        ->columnSpan(12)
        ->label('Company Name'),
    TextInput::make('addr_line_1')
        ->columnSpan(2)
        ->required()
        ->columnSpan(6)
        ->maxLength(255),
    TextInput::make('addr_line_2')
        ->columnSpan(6)
        ->maxLength(255),
    //....
]),

Select::make('company_id')
->relationship('company', 'name')
->searchable()
->preload()
->placeholder('Select a company')
->columns(12)
->createOptionForm([
    TextInput::make('name')
        ->required()
        ->maxLength(255)
        ->columnSpan(12)
        ->label('Company Name'),
    TextInput::make('addr_line_1')
        ->columnSpan(2)
        ->required()
        ->columnSpan(6)
        ->maxLength(255),
    TextInput::make('addr_line_2')
        ->columnSpan(6)
        ->maxLength(255),
    //....
]),

I removed some of the inputs to keep it short.

7 Replies

Vp•8mo ago

What is the exact problem?

I am unsure if it is possible or if I am barking up the wrong tree.

It's possible, the easiest way to check/make it working is copy paste all the form needed to create new Company, for example: Your CompanyResource Form and Your select "+" company form should match (not design, but data) And they should've BelongsTo relationship

toeknee•8mo ago

try changing: ->columnSpan(12) to ->columnSpanFull() And also.. you have two column spaces on your addr_line_1 it's either 6 or 2 😉

DamienOP•8mo ago

And also.. you have two column spaces on your addr_line_1 it's either 6 or 2 😉

Classic! Will give this a go apologies that this wasn't clear, it was that the columns do not seem to be applying the specified columns correctly. Going to try the below suggestions and come back to here. Hmm, I copied and pasted the form from the original resource, didn't make a difference. I also tried using columnSpanFull() which also did not seem to make a difference.

Vp•8mo ago

You have to put inside Grid https://filamentphp.com/docs/3.x/forms/layout/grid#grid-component

Grid - Form Builder - Filament

Vp•8mo ago

like this

->createOptionForm([
    Forms\Components\Grid::make()
        ->schema([
            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255)
                ->columnSpanFull()
                ->label('Company Name'),
            Forms\Components\TextInput::make('addr_line_1')
                ->required()
                ->maxLength(255),
            Forms\Components\TextInput::make('addr_line_2')
                ->maxLength(255),
            // ...
        ]),
]),

->createOptionForm([
    Forms\Components\Grid::make()
        ->schema([
            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255)
                ->columnSpanFull()
                ->label('Company Name'),
            Forms\Components\TextInput::make('addr_line_1')
                ->required()
                ->maxLength(255),
            Forms\Components\TextInput::make('addr_line_2')
                ->maxLength(255),
            // ...
        ]),
]),

toeknee•8mo ago

As Vp said, but also your columns won't apply properly when you have:

    TextInput::make('addr_line_1')
        ->columnSpan(2)
        ->required()
        ->columnSpan(6)
        ->maxLength(255),

    TextInput::make('addr_line_1')
        ->columnSpan(2)
        ->required()
        ->columnSpan(6)
        ->maxLength(255),

You have two columnSpans here.

DamienOP•8mo ago

Ah I was missing the Grid, I did remove the duplicate columnSpan however, thank you both! Will try it now. That worked thanks, the Grid was the missing key!

Gaming

Programming

Styling forms modal forms created with createOptionsForm()