columns() not having any effect

I have a page component that uses an InfoList:

class MonthEnd extends Page implements HasForms, HasInfolists
{
    use InteractsWithInfolists, InteractsWithForms;

    public function prepWorkInfoList(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema([
                SimpleListEntry::make('month_end_tasks')
                    ->label('')
                    ->itemIcon('heroicon-o-check')
                    ->listStyle('list')
                    ->itemLabel(fn ($record) => $record['title'])
            ])->columns(2);
    }
}

class MonthEnd extends Page implements HasForms, HasInfolists
{
    use InteractsWithInfolists, InteractsWithForms;

    public function prepWorkInfoList(Infolist $infolist): Infolist
    {
        return $infolist
            ->schema([
                SimpleListEntry::make('month_end_tasks')
                    ->label('')
                    ->itemIcon('heroicon-o-check')
                    ->listStyle('list')
                    ->itemLabel(fn ($record) => $record['title'])
            ])->columns(2);
    }
}

But no matter what combination of columns() and/or columnSpan() I use either on the infolist or on the SimpleListEntry, nothing has any effect aside from making it just slightly smaller. When I have ->columns(2) it shrinks to maybe 80% of the full width, and when I take it off, it's at full width. Using any other value doesn't produce a different result.

Solution:

Yea it took me some time to get used to. But it's really readable and flexible. 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....

Jump to solution

8 Replies

Dennis Koch•14mo ago

nothing has any effect aside from making it just slightly smaller.

So it has an effect. More columns => Less space per column => Smaller content What are you trying to archieve? Can you send a screenshot that shows the issue with corresponding code?

John•14mo ago

You can put a Grid::make(2)->schema([ ... ]) around it to create a 2 column layout. (2 being the default so can be omitted) The components inside will default take up 1 col. You can make components take up both cols with ->columnSpan(2) or ->columnSpanFull(). If you want two columns with multiple components per column (think MS Word / Google Docs where you add 2 columns), add the Grid, inside put two Group::make()'s and inside those groups put your components.

Jon MasonOP•14mo ago

I guess I would expect content that's going from 1 column to 2 columns and only spanning 1 column to shrink by half when applied. It's just shrinking by a small amount, and then doesn't respond to any other number of columns that I set it to. I'll try wrapping it in a Grid and see if I can get it working that way.

Solution

John•14mo ago

Jon MasonOP•14mo ago

that's a really helpful explanation, thank you. I was never quite sure where to put colums() vs columnSpan() and was just fumbling around with it.

John•14mo ago

relatable 😉

Dennis Koch•14mo ago

Does this solve the issue? I think columns() method should still work.

Jon MasonOP•14mo ago

yep

Gaming

Programming

columns() not having any effect