Filament•16mo ago

grid help

Hello I have my form on 4 columns and I want to have my first field 1/4 and under it 2/4 and 2/4 fields. Right now the 2/4 field is placed next to the 1/4 field as there is still space. How can I achieve what I want?

15 Replies

LiamOP•16mo ago

now I want first name and last name next to each other

awcodes•16mo ago

https://filamentphp.com/docs/3.x/forms/layout/grid#setting-the-starting-column-of-a-component-in-a-grid

Grid - Form Builder - Filament

LiamOP•16mo ago

LiamOP•16mo ago

I tried to get it like this, but it should be on the red part.

awcodes•16mo ago

share your code please

LiamOP•16mo ago

https://paste.laravel.io/16bef651-e08a-40df-b3b2-ebae35f3e890

awcodes•16mo ago

ah, ok. it might be easier to wrap each 'row' in a Group component, then you'll have more control over this. but this will work too:

Forms\Components\TextInput::make('company_name')
    ->maxLength(255)
    ->columnStart(1),
Forms\Components\TextInput::make('first_name')
    ->required()
    ->maxLength(255)
    ->columnStart(1)
    ->columnSpan(3),

Forms\Components\TextInput::make('company_name')
    ->maxLength(255)
    ->columnStart(1),
Forms\Components\TextInput::make('first_name')
    ->required()
    ->maxLength(255)
    ->columnStart(1)
    ->columnSpan(3),

LiamOP•16mo ago

I see thanks!ç Could it be that group components for forms are missing from documentation

awcodes•16mo ago

yea, they exist though. but they have the same methods as all the other layout components

LiamOP•16mo ago

I've tried it, but I can't get it working.. I feel really stupid right now 😂

LiamOP•16mo ago

when I wrap the fields in a group it is shown in a column

Thijmen•16mo ago

You could also group every row in a Grid::make()

Kleis•16mo ago

Have you tried placing the fields in the order you want them? That's what I ended up doing in another form, if you have 3 fields at column 1 then 1 at column 2 it will start 3 rows down 😑

LiamOP•16mo ago

 return $form
            ->schema([
                Forms\Components\Section::make()
                    ->schema([
                        Forms\Components\Group::make()
                            ->schema([
                                Forms\Components\TextInput::make('company_name')
                                    ->maxLength(255)
                                    ->columnStart(1)
                                    ->columnSpan(['lg' => 3])
                            ])
                            ,
                        Forms\Components\Group::make()
                            ->schema([
                                Forms\Components\TextInput::make('first_name')
                                    ->required()
                                    ->maxLength(255)
                                    ->columnSpan(['lg' => 2]),
                                Forms\Components\TextInput::make('last_name')
                                    ->required()
                                    ->maxLength(255)
                                    ->columnSpan(['lg' => 2]),
                            ]),
                    ])->columns(4),
            ]);

 return $form
            ->schema([
                Forms\Components\Section::make()
                    ->schema([
                        Forms\Components\Group::make()
                            ->schema([
                                Forms\Components\TextInput::make('company_name')
                                    ->maxLength(255)
                                    ->columnStart(1)
                                    ->columnSpan(['lg' => 3])
                            ])
                            ,
                        Forms\Components\Group::make()
                            ->schema([
                                Forms\Components\TextInput::make('first_name')
                                    ->required()
                                    ->maxLength(255)
                                    ->columnSpan(['lg' => 2]),
                                Forms\Components\TextInput::make('last_name')
                                    ->required()
                                    ->maxLength(255)
                                    ->columnSpan(['lg' => 2]),
                            ]),
                    ])->columns(4),
            ]);

I have my code like this now

Kleis•16mo ago

Like this ?

        return $form
        ->schema([
            Forms\Components\Section::make()
                ->schema([
                    Forms\Components\Group::make()
                        ->schema([
                            Forms\Components\TextInput::make('company_name')
                                ->maxLength(255)
                                ->columnStart(1)
                                ->columnSpan(['lg' => 3])
                        ])->columnSpan(['lg' => 4])
                        ,
                    Forms\Components\Group::make()
                        ->schema([
                            Forms\Components\TextInput::make('first_name')
                                ->required()
                                ->maxLength(255),
                            Forms\Components\TextInput::make('last_name')
                                ->required()
                                ->maxLength(255)
                        ])->columns(2)->columnSpan(4),
                ])->columns(4),
        ]);

        return $form
        ->schema([
            Forms\Components\Section::make()
                ->schema([
                    Forms\Components\Group::make()
                        ->schema([
                            Forms\Components\TextInput::make('company_name')
                                ->maxLength(255)
                                ->columnStart(1)
                                ->columnSpan(['lg' => 3])
                        ])->columnSpan(['lg' => 4])
                        ,
                    Forms\Components\Group::make()
                        ->schema([
                            Forms\Components\TextInput::make('first_name')
                                ->required()
                                ->maxLength(255),
                            Forms\Components\TextInput::make('last_name')
                                ->required()
                                ->maxLength(255)
                        ])->columns(2)->columnSpan(4),
                ])->columns(4),
        ]);

Gaming

Programming

grid help