Make two sections appear side by side
I've got an infolist with two sections. I'd like them so appear 50% width each, side by side on the screen instead of one above the other.
Does Filament provide a built-in way to do this or do I need to add my own css?
Section::make('customer')
->collapsible()
->columns([
'sm' => 2,
'xl' => 4,
'2xl' => 8,
])
->schema([
TextEntry::make(''firstname)
->label('First name'),
TextEntry::make('lastname')
->label('Last name'),
]),
Section::make('address')
->collapsible()
->columns([
'sm' => 2,
'xl' => 4,
'2xl' => 8,
])
->schema([
TextEntry::make('address1')
->label('Address 1'),
TextEntry::make('address2')
->label('Address 2'),
]),
Solution:Jump to solution
Use
->columns() on layout components to state how many cols there are.
Use ->columnSpan() on field components to state how many cols they take up.
You can nest Group and Grid (and other layout) components as mush as you need. Not only to change visual layout, but also to collectively show/hide/readonly them.
In your case, make a Grid::make(2) (2 is the default) and put your sections in its ->schema....4 Replies
Solution
Use
->columns() on layout components to state how many cols there are.
Use ->columnSpan() on field components to state how many cols they take up.
You can nest Group and Grid (and other layout) components as mush as you need. Not only to change visual layout, but also to collectively show/hide/readonly them.
In your case, make a Grid::make(2) (2 is the default) and put your sections in its ->schema.Thanks.
Not sure what I'm doing wrong here but my sections are still appearing one above the other:
Grid::make(2)
->schema([
Section::make('customer')
->collapsible()
->columns([
'sm' => 2,
'xl' => 4,
'2xl' => 8,
])
->schema([
TextEntry::make(''irstname')
->label('First name'),
TextEntry::make('lastname')
->label('Last name'),
]),
Section::make('address')
->collapsible()
->columns([
'sm' => 2,
'xl' => 4,
'2xl' => 8,
])
->schema([
TextEntry::make('address1')
->label('Address 1'),
TextEntry::make('address2')
->label('Address 2'),
]),
])
I think sections get a
->columnSpanFull() by default. You can override that with a ->columnSpan(1).
By the way, if you Reply to someones message, they get notified 🙂That's it! Thank you. (Also thanks for the tip on notifications)