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•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•2y ago

Message Not Public

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•2y ago

Message Not Public

toeknee•2y ago

Correct, but her may have a grid above the grid too 🙂

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•2y ago

Ohh please don't use jQuery

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•2y ago

Should just be the ->lazy() method.

KuldeepOP•2y ago

Can you show me a simple example?

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.

Gaming

Programming

Same width text fields in the form