align input

Hi,

I have a small problem: I would like to align the inputs with each other despite the return to the line of a label of one of them (see image)

do you have an idea ?

Thanks

Expecto Patronum•5/15/24, 12:58 PM

Have you use grid ? Probably you add columspan and columns to manage the distance between the fields. Maybe Can you show your code ?

SidemOP•5/15/24, 1:05 PM

Here is my code :

Wizard\Step::make('products')
->schema([
    TextInput::make('number_products')
        ->label('numbers of products')
        ->integer()
        ->minValue(1)
        ->live()
        ->afterStateUpdated(function ($state, $set) {
            $set('numbers_of_products', range(0, $state - 1));
        }),

        Grid::make(2)
        ->schema(function (Get $get) {
            $products = $get('numbers_of_products') ?? [];
            $allInputs = [];

            foreach ($products as $index => $product) {
                $Inputs = Grid::make(1)->schema([
                    Select::make("type_of_products_{$index}")
                        ->label("my first label")
                        ->multiple()
                        ->searchable()
                        ->preload()
                        ->relationship('type_of_products', 'name_of_products', fn (Builder $query) => $query->orderBy('name_of_products', 'asc'))
                        ->required()
                        ->columnSpan(1), 

                    TextInput::make("name_of_products_{$index}")
                        ->label("the second label with big test  : larem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus euismod, fermentum nunc nec, tincidunt nisl")
                        ->required()
                        ->columnSpan(1),

                    TextInput::make("product_quantite_{$index}")
                        ->label("last label")
                        ->integer()
                        ->minValue(1)
                        ->required()
                        ->columnSpan(1) 
                ]);

                $allFields[] = Grid::make(3)->schema($Inputs);
            }

            return $allInputs;
        })
        ->key('dynamicTypeFields'),

    ]),

Wizard\Step::make('products')
->schema([
    TextInput::make('number_products')
        ->label('numbers of products')
        ->integer()
        ->minValue(1)
        ->live()
        ->afterStateUpdated(function ($state, $set) {
            $set('numbers_of_products', range(0, $state - 1));
        }),

        Grid::make(2)
        ->schema(function (Get $get) {
            $products = $get('numbers_of_products') ?? [];
            $allInputs = [];

            foreach ($products as $index => $product) {
                $Inputs = Grid::make(1)->schema([
                    Select::make("type_of_products_{$index}")
                        ->label("my first label")
                        ->multiple()
                        ->searchable()
                        ->preload()
                        ->relationship('type_of_products', 'name_of_products', fn (Builder $query) => $query->orderBy('name_of_products', 'asc'))
                        ->required()
                        ->columnSpan(1), 

                    TextInput::make("name_of_products_{$index}")
                        ->label("the second label with big test  : larem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus euismod, fermentum nunc nec, tincidunt nisl")
                        ->required()
                        ->columnSpan(1),

                    TextInput::make("product_quantite_{$index}")
                        ->label("last label")
                        ->integer()
                        ->minValue(1)
                        ->required()
                        ->columnSpan(1) 
                ]);

                $allFields[] = Grid::make(3)->schema($Inputs);
            }

            return $allInputs;
        })
        ->key('dynamicTypeFields'),

    ]),