Filament•3mo 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•3mo ago

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

MacTavishOP•3mo 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•3mo ago

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

LeandroFerreira•3mo ago

could you provide the code that are you using?

MacTavishOP•3mo ago

message.txt

LeandroFerreira•3mo ago

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

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

MacTavishOP•3mo 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•3mo 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•3mo ago

@MacTavish did it work?

MacTavishOP•3mo ago

Yes, Thank you!

MacTavishOP•3mo ago

How Do I mark as solved?

Gaming

Programming

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