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 :
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
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 !
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 :
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
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
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
