FilamentF
Filament•9mo ago
Ankh

Sidebar custom width of split infolist

Hi everyone,
I'm struggling with the layout of an infolist page.

I'm using a split to get a sidebar effect but this sidebar doesn't take enough space and I would like to specify 25% width for it.

Here is my code simplified :

return $infolist
  ->schema([
      Split::make([
         Grid::make()
           ->schema([
              Section::make('Informations')
                ->columns(2)
                ->schema([...])
              Section::make('Communication')
                ->columns(2)
                ->schema([...])
          ]),
        Section::make([...])->grow(false)
     ])->columnSpan('full')


The ->grow(false) property makes the sidebar too narrow, but it's too large if I put grow(true).

Inspecting the html code on the dev tools I've noticed that the split creates two divs, the first one having the classes "w-full flex-1"
If I put 
flex: 0.25 1 0

on the second div (the sidebar) it takes the width I want but I can't find the place where to add that as if I use ->extraAttributes on the Section (second part of the split), it puts the css on the <section> which is the child of the div I'd like to target.

Any ideas of a solution I might be missing ? I've had no luck on all the topics related to splits in here or github/stackoverflow, etc.
Thank you very much !
Solution
I've found a solution
For those who need more width control with a sidebar for Forms and Infolist there is a component called group which I think is not documented (haven't found any mentions in the documentation) but can help achieve this using columnSpan on each group (for example 2 for the main part and 1 for the sidebar) and columns on the infolist or form with for example 3.
You can get more precise with the column distribution with more columns (8 and 2 with colums at 10 for example)

Hope it can help
Jump to solution
Was this page helpful?