F
Filament•21h 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')
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
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
1 Reply
Solution
Ankh
Ankh•18h ago
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

Did you find this page helpful?