Filament•2y ago

Layout question - Grids and Columns on a Form

Hi folks! Glad to see this isn't a ghost town due to Laracon! lol Layout Question - I have a fieldset that's 5 columns wide. Based on previous selections, those 5-columns will show anywhere between 1 and 5 drop downs. That's working. The use case is that on a Form the user selects a 1-5 bedroom count. Based on that, the bed types fieldset shows a drop down for each bedroom where bed type is selected (King, queen etc). But each bedroom can have two beds, bedA and BedB. If the user has selected 2 bedrooms, my code will populate 4 of the 5 columns with dropdowns so it's laid out like this: Bed Types Bed1a, Bed2a, Bed2a, Bed2b But I wish I could make it a 2x2 grid within the fieldset instead, like this: Bed Types Bed1a Bed2a Bed2b Bed2b I guess I don't understand the Grid function. I'm used to setting a column count but I'm uncertain how to use Grid. Can I do this with a Grid?? Any help would be appreciated. Hope this question makes sense.

Solution:

Like this

Fieldset::make('Bed Types')->schema([Grid::make(5)->schema([]), Grid::make(5)->schema([])])

Fieldset::make('Bed Types')->schema([Grid::make(5)->schema([]), Grid::make(5)->schema([])])

Jump to solution

15 Replies

Patrick Boivin•2y ago

Hi @emaz_, I think this should do what you need:

Grid::make(2)->schema([
    TextInput::make('oneA'),
    TextInput::make('oneB'),
    TextInput::make('twoA'),
    TextInput::make('twoB'),
]),

// Laid out as:
// oneA oneB
// twoA twoB

Grid::make(2)->schema([
    TextInput::make('oneA'),
    TextInput::make('oneB'),
    TextInput::make('twoA'),
    TextInput::make('twoB'),
]),

// Laid out as:
// oneA oneB
// twoA twoB

Or did I miss a detail in the ordering you are trying to create?

EmazOP•2y ago

Thanks! But looks like I can't have a grid within a Fieldset? Undefined property: App\Forms\Components\SectionFieldset::$Grid

EmazOP•2y ago

Sorry... how do I do codeblocks here in Discord?

EmazOP•2y ago

See, a prior dropdown hides unnecessary selects. But if I have less than 5 bedrooms it will just fill columns...

EmazOP•2y ago

Iliyas M•2y ago

So u need 2 columns per row right?

EmazOP•2y ago

No, 5. There are 5 but I hide the 'unused' bedrooms. So I really want 5 columns, 2 rows. All within one fieldset 1a 2a 3a 4a 5a 1b 2b 3b 4b 5b The problem is, if I hide 4a and 5a because there are only 3 bedrooms, they fill the top row

Iliyas M•2y ago

You can add 2 grid layouts each for a series and b series.

EmazOP•2y ago

I couldn't even add one for a fieldset... it says... Undefined property: App\Forms\Components\SectionFieldset::$Grid

Iliyas M•2y ago

Within fieldset's schema array, you can add multiple grid layouts.

EmazOP•2y ago

Oh, gotta put it in the schema... I see. I'll try that, thanks

Solution

Iliyas M•2y ago

Like this

Fieldset::make('Bed Types')->schema([Grid::make(5)->schema([]), Grid::make(5)->schema([])])

Fieldset::make('Bed Types')->schema([Grid::make(5)->schema([]), Grid::make(5)->schema([])])

EmazOP•2y ago

Great, thanks! I'll give it a shot

EmazOP•2y ago

Perfect, thanks! I have some pretty deep schema to do this but it worked beautifully. I'll post some screen shots.

EmazOP•2y ago

I select number of bedrooms, hide some columns, and my 'a' row and 'b' row remain as separate rows due to the grid. Thanks so much.

Gaming

Programming

Layout question - Grids and Columns on a Form

Did you find this page helpful?