F
Filament•2y ago
Kuldeep

Same width text fields in the form

How can I make the first, last name fields same 50% width in a single row? My code is like this: 
Forms\Components\TextInput::make('first_name')
    ->label('First Name')
    ->required()
    ->columnSpan(4),
Forms\Components\TextInput::make('last_name')
    ->label('Last Name')
    ->required()
    ->columnSpan(8),
Forms\Components\TextInput::make('first_name')
    ->label('First Name')
    ->required()
    ->columnSpan(4),
Forms\Components\TextInput::make('last_name')
    ->label('Last Name')
    ->required()
    ->columnSpan(8),
11 Replies
toeknee
toeknee•2y ago
ColumnSpan() You have set (4) then (8) But 8 likely isn't possible in your current setup. Default is 2 so you should use: columnSpan(1) or none as we do 1 with a column of 2. on both, unless you have set columns() on the parent then it's whatever is half of the defined number
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Kuldeep
KuldeepOP•2y ago
Thank you @7moosman & @toeknee_iom Little bit of correction: 
Forms\Components\Grid::make()
->schema([
    Forms\Components\TextInput::make('first_name')
        ->label('First Name')
        ->required(),
    Forms\Components\TextInput::make('last_name')
        ->label('Last Name')
        ->required(),
])
->columns(2)
->columnSpan(12),
Forms\Components\Grid::make()
->schema([
    Forms\Components\TextInput::make('first_name')
        ->label('First Name')
        ->required(),
    Forms\Components\TextInput::make('last_name')
        ->label('Last Name')
        ->required(),
])
->columns(2)
->columnSpan(12),
This is the working code for me.
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
toeknee
toeknee•2y ago
Correct, but her may have a grid above the grid too 🙂
Kuldeep
KuldeepOP•2y ago
Yes, I've nested grids and that's why I've to put both. One more thing, How can I do some jquery events with this Form component? Like: I wanted to display a validation message only on blur event.
toeknee
toeknee•2y ago
Ohh please don't use jQuery
Kuldeep
KuldeepOP•2y ago
I'm just saying as an example I wanted to use AlpineJS for this. For Ex. Validation message: "The first name should be only alphabetic " display on blur event of the first name field. I'm using the Livewire component to display the form.
awcodes
awcodes•2y ago
Should just be the ->lazy() method.
Kuldeep
KuldeepOP•2y ago
Can you show me a simple example?
awcodes
awcodes•2y ago
Just add that to your input. ->required()->lazy() By default fields are evaluated when the form is submitted. ->reactive() makes them evaluate on input. ->lazy() makes them evaluate on blur.

Did you find this page helpful?