Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

cxbdia's avatar

Filament Stacking two containers side by side in Infolists

I'm currently referring to this guide to create two split containers side by side to build something like:

enter image description here

However, the code given on the filament documentation says to use Split::make() but it is not specified as to where this code is to be written.

Monosnap-Image-2023-12-11-01-07-04.png

I've been trying all sorts of things and went through laracasts videos but I'm not finding any information on where to write this piece of code.

I've written the Split code inside my infolist like below:

public static function infolist(Infolist $infolist): Infolist
	{	
		return $infolist
			->schema([
				Split::make([
					Section::make([
						TextEntry::make('quantity'),
					])
				])
			]);

However, I'm getting the error

Filament\Infolists\ComponentContainer::Filament\Infolists\Concerns{closure}(): Argument #1 ($component) must be of type Filament\Infolists\Components\Component, Filament\Tables\Columns\Layout\Split given

What am I doing wrong? How should I interpret the documentation and code given on pages such as:

https://filamentphp.com/docs/3.x/infolists/layout/split

https://filamentphp.com/docs/3.x/tables/layout

I would really appreciate some help.

0 likes
3 replies
LaryAI's avatar
Level 58

It seems like you're trying to use the Split layout component from Filament's tables module within an infolist, which is not directly compatible. The Split component is designed to be used within the context of Filament tables or forms, not infolists.

However, you can achieve a similar layout in an infolist by using custom HTML and CSS to create a side-by-side layout. Here's an example of how you might do that:

public static function infolist(Infolist $infolist): Infolist
{
    return $infolist
        ->schema([
            View::make('admin.infolist.custom-split')
                ->with([
                    'leftContent' => TextEntry::make('leftQuantity'),
                    'rightContent' => TextEntry::make('rightQuantity'),
                ]),
        ]);
}

Then, in your resources/views/admin/infolist/custom-split.blade.php file, you would create the HTML structure for the split layout:

<div class="grid grid-cols-2 gap-4">
    <div>
        {{ $leftContent }}
    </div>
    <div>
        {{ $rightContent }}
    </div>
</div>

This is a simplified example, and you would need to adjust the HTML and CSS to match your exact layout requirements. The key point is that you're using a custom view to create the layout, and then passing in the components you want to display on each side of the split.

Remember to replace 'leftQuantity' and 'rightQuantity' with the actual fields you want to display in your infolist.

Please note that this is a workaround since the Split component is not intended for use in infolists. If you need more complex layouts, you might need to extend Filament with custom components or use a different approach to display your data.

3 likes

Please or to participate in this conversation.