Position components within Grid

Good afternoon,
I am quite new to Filament but am used to Laravel x React project development, so already sorry for my inexperience here, but I ran in to a styling / positioning issue earlier today, I tried a ton of different things for the past 2 hours, both with suggestions from Google and AI but failed to get it working.

I am trying to vertical center a Action inside a Grid, this is my current code

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Action::make('load_name')
            ->label('Load Current')
            ->color('gray'),
    ]),

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Action::make('load_name')
            ->label('Load Current')
            ->color('gray'),
    ]),

I tried adding

flex items-center

flex items-center

classes to the grid but saw in the dev tools that those classes where not allocated to the grid element it self but to a parent div, which obviously does not work, while adding custom clases to the Action component is the other way around.

I tried using placeholders, views and a ton more but all without luck, even adding a general margin to the button doesn't seem to work. Even tho this would already be a hacky solution.

If anyone has some suggestions I'd like to hear them! Thanks in advance.

Solution

try this

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Flex::make([
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),
    ]),

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Flex::make([
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),
    ]),

or even this to consume all available space

        Flex::make([
            TextInput::make('name')
                ->label('Server Name')
                ->required(),
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),

        Flex::make([
            TextInput::make('name')
                ->label('Server Name')
                ->required(),
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),

Jump to solution

Position components within Grid

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Action::make('load_name')
            ->label('Load Current')
            ->color('gray'),
    ]),

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Action::make('load_name')
            ->label('Load Current')
            ->color('gray'),
    ]),

I tried adding

flex items-center

flex items-center

Solution

try this

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Flex::make([
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),
    ]),

Grid::make()
    ->columns(4)
    ->columnSpanFull()
    ->schema([
        TextInput::make('name')
            ->label('Server Name')
            ->columnSpan(3)
            ->required(),
        Flex::make([
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),
    ]),

or even this to consume all available space

        Flex::make([
            TextInput::make('name')
                ->label('Server Name')
                ->required(),
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),

        Flex::make([
            TextInput::make('name')
                ->label('Server Name')
                ->required(),
            Action::make('load_name')
                ->label('Load Current')
                ->color('gray'),
        ])->verticallyAlignCenter(),

Jump to solution

Position components within Grid

Position components within Grid

Similar Threads

Similar Threads

Similar Threads