Filament Form Fieldset or Repeater Not Displaying Full-Width Properly in Laravel Filament Form

Question

I am working on a Laravel project using Filament to build a form, and I'm having issues with the layout of a Repeater within a Section. Despite setting columns(4) and explicitly defining column spans for each field, the fields do not display in a row or take up the full width of the page.

Here’s a simplified version of my code:

\Filament\Forms\Components\Section::make()
    ->heading('اطلاعات شغلی')
    ->columns(4) // Section uses a 4-column grid
    ->schema([
        Repeater::make('interests')
            ->relationship('interests')
            ->label('علاقه‌مندی‌ها')
            ->schema([
                Select::make('interest_id')
                    ->label('نوع اشتغال')
                    ->options(Interest::pluck('title', 'id')->toArray())
                    ->required()
                    ->searchable()
                    ->columnSpan(2),

                Select::make('state_id')
                    ->label('استان محل اشتغال')
                    ->getSearchResultsUsing(fn(string $search): array => State::query()
                        ->where('name', 'like', "%{$search}%")
                        ->limit(10)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->getOptionLabelUsing(fn($value): ?string => State::find($value)?->name)
                    ->required()
                    ->searchable()
                    ->columnSpan(1),

                Select::make('city_id')
                    ->label('شهر محل اشتغال')
                    ->required()
                    ->getSearchResultsUsing(fn(string $search, Get $get): array => City::query()
                        ->whereRelation('state', 'id', '=', $get('state_id'))
                        ->where('name', 'like', "%{$search}%")
                        ->limit(10)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->getOptionLabelUsing(fn($value): ?string => City::find($value)?->name)
                    ->placeholder('انتخاب کنید')
                    ->searchable()
                    ->visible(fn(Get $get) => !empty($get('state_id')))
                    ->columnSpan(1),

                Select::make('university_id')
                    ->label('دانشگاه محل فعالیت فعلی')
                    ->getSearchResultsUsing(fn(string $search, Get $get): array => University::query()
                        ->whereRelation('state', 'id', '=', $get('state_id'))
                        ->where('name', 'like', "%{$search}%")
                        ->limit(10)
                        ->pluck('name', 'id')
                        ->toArray())
                    ->getOptionLabelUsing(fn($value): ?string => University::find($value)?->name)
                    ->placeholder('انتخاب کنید')
                    ->required()
                    ->searchable()
                    ->columnSpan(2),

                TextInput::make('activity_place')
                    ->label('محل فعالیت')
                    ->nullable()
                    ->columnSpan(4), // Full row
            ])
            ->columns(4) // Repeater uses a 4-column grid
            ->label('اطلاعات شغلی')
            ->required(),
    ]),

But now the problem is:

Fields within the Repeater are not displayed in a proper row or full-width layout.

Even though I’ve set columns(4) for both the Section and the Repeater, the form elements seem to be confined to a narrower width than expected.

The columnSpan for each field (e.g., columnSpan(2) or columnSpan(4)) doesn't seem to affect the layout as expected.

Result:

What I tried:

• Explicitly setting columns() on both the Section and the Repeater.
• Adjusting the columnSpan values to ensure fields align properly.

Expected Behavior:

The fields within the Repeater should:

1. Display properly in rows according to the columnSpan values.

2. Occupy the full width of the page, respecting the 4-column grid layout.

So, How can I ensure that the Repeater fields within the Section, Use the full page width?

Is there something I’m missing in the configuration, or could this be related to Filament's CSS/JS?

Any help would be greatly appreciated! Thanks in advance.

Laravel: 10.x Filament: 3.x PHP: 8.1

Answer 1

The repeater column span is 1 by default, so it is filling a single column, which is why it's all squished.

For the repeater to span the full width:

1. use ->colSpanFull() on the repeater (or ->colSpan(4))
2. remove ->columns(4) from the section (or change to ->columns(1))