Filament•2mo ago

How to have 2 fields per row in full width tab?

I've used Tabs::make('Tabs')->columnSpanFull()->tabs() to create full width tabs. Now I can't seem to have 2 fields per row within the tab. It probably sounds noobish but I just started filament now and been trying to get used with docs but unable to figure it out.

Solution:

use Group ```php ... Tabs::make('Tabs') ->columnSpanFull()...

Jump to solution

11 Replies

awcodes•2mo ago

The fields need to have their own columnSpan. The default is 2 columns per each parent component. If that makes sense.

MacTavishOP•2mo ago

To have 2 fields per row, I'll need to set columnSpan(6) for both? I am assuming 12 cols per row. Is this correct? I've tried different values but only TextArea fields get affected which seem to considering it as cols value.

awcodes•2mo ago

The default is 2. Sounds like you might need a layout component.

LeandroFerreira•2mo ago

could you provide the code that are you using?

MacTavishOP•2mo ago

message.txt

LeandroFerreira•2mo ago

...
Tabs\Tab::make('Post info')
->columns(2)
->schema(...

...
Tabs\Tab::make('Post info')
->columns(2)
->schema(...

MacTavishOP•2mo ago

No. I want the tab to take up full width but I want certain fields to render as if each is in it's own column within a row. tab to be full width as in SS but I want the Title & Slug in one row

Solution

LeandroFerreira•2mo ago

use Group

...
Tabs::make('Tabs')
    ->columnSpanFull()
    ->tabs([
        Tabs\Tab::make('Post info')
            ->schema([
                Select::make('blog_category_id'),
                Group::make([
                    TextInput::make('title'),
                    TextInput::make('slug'),
                ])
                    ->columns(2),
                TextInput::make('read_time'),
                ...
            ]),
    ]),

...
Tabs::make('Tabs')
    ->columnSpanFull()
    ->tabs([
        Tabs\Tab::make('Post info')
            ->schema([
                Select::make('blog_category_id'),
                Group::make([
                    TextInput::make('title'),
                    TextInput::make('slug'),
                ])
                    ->columns(2),
                TextInput::make('read_time'),
                ...
            ]),
    ]),

LeandroFerreira•2mo ago

@MacTavish did it work?

MacTavishOP•2mo ago

Yes, Thank you!

MacTavishOP•2mo ago

How Do I mark as solved?

Gaming

Programming

How to have 2 fields per row in full width tab?