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);
    }
}

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()

columns()

columns()

columns() and/or

columnSpan()

columnSpan()

I use either on the infolist or on the

SimpleListEntry

SimpleListEntry

SimpleListEntry

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

When I have

->columns(2)

->columns(2)

->columns(2)

->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()

->columns()

->columns()

->columns() on layout components to state how many cols there are.
Use

->columnSpan()

->columnSpan()

->columnSpan()

->columnSpan() on field components to state how many cols they take up.
You can nest

Group

Group

Group

Group and

Grid

Grid

Grid

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

Dennis Koch•11/7/23, 1:08 PM

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•11/7/23, 1:21 PM

You can put a Grid::make(2)->schema([ ... ])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)->columnSpan(2) or ->columnSpanFull()->columnSpanFull().

If you want two columns with multiple components per column (think MS Word / Google Docs where you add 2 columns), add the

Grid

Grid

, inside put two Group::make()Group::make()'s and inside those groups put your components.

Jon MasonOP•11/7/23, 2:07 PM

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

Grid

and see if I can get it working that way.

Solution

John•11/7/23, 2:41 PM

Yea it took me some time to get used to. But it's really readable and flexible.

Use

->columns()

->columns()

on layout components to state how many cols there are.
Use

->columnSpan()

->columnSpan()

on field components to state how many cols they take up.
You can nest

Group

Group

and

Grid

Grid

(and other layout) components as mush as you need. Not only to change visual layout, but also to collectively show/hide/readonly them.

Jon MasonOP•11/7/23, 2:42 PM

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•11/7/23, 2:43 PM

relatable

Dennis Koch•11/7/23, 2:57 PM

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

Jon MasonOP•11/7/23, 6:27 PM

yep

columns() not having any effect

Similar Threads

Similar Threads

Similar Threads