Grid and Columns in v4
I am a little confused with the new grid & columns format in v4, because when I use grid columns the results are not the same. Can you help me?
Code :
public static function configure(Schema $schema): Schema
{
return $schema
->components([
Grid::make()
->schema([
Section::make()
->schema([
TextInput::make('name')
->label('Name')
->required()
->columnSpanFull()
->inlineLabel()
->reactive(),
TextInput::make('email')
->label('Email')
->columnSpanFull()
->required()
->inlineLabel(),
TextInput::make('password')
->password()
->inlineLabel()
->columnSpanFull()
->dehydrateStateUsing(fn ($state) => Hash::make($state))
->dehydrated(fn ($state) => filled($state))
->required(fn (string $context): bool => $context === 'create'),
DateTimePicker::make('email_verified_at')
->label('Email Verifikasi')
->columnSpanFull()
->inlineLabel(),
]) ->columnSpan(3) ]) ->columns(3), ]);
}
]) ->columnSpan(3) ]) ->columns(3), ]);
}
Solution:Jump to solution
If that's all you have your Grid seems unnecessary. You can put
->columns(3) on the Form itself.9 Replies
In the schema you haven't set the columns to used.. You set it on Grid, but not the columnSpan it should use. You will want to make the Grid columnSpanFull() to be the full width. At the moment it's 2 columns and that first grid uses 1 half.
Then you have a Section which uses all columns again, and full width inputs to deliver exactly what you hvae asked for
If you explain what you are trying to achieve?
And also. you could format the code type too when post code examples.
i.e. 3 of: ` with a php so like : ``php
I want it to be like the image that uses Filament V3, so the Columns fit and match, and when I apply it to V4 the layout doesn't match, I don't know if it's a bug or what.
And this code
There's a
columnSpanFull() missing on the Grid. Because by default forms have 2 columnsExactly
Solution
If that's all you have your Grid seems unnecessary. You can put
->columns(3) on the Form itself.Or put
->columns(1) on the form and use your Gridokay this works well and simpler i think than v3, no wonder i tried using v3 the result was not the same. thanks for your feedback
read the upgrade guide, the default behaviour for column spans on some components has changed so its more consistent in v4