Filament•4d ago

Form with 1/4 and 3/4 cols

hi, i need to make a form with the first half equals to 1/4 of the page and the second 3/4 i've tried different grid and flex setting but seems impossible to me.

5 Replies

SoundmitOP•4d ago

what can i get is this

public static function form(Schema $schema): Schema
    {
        return $schema->schema([
            Grid::make(12)
                ->schema([

                    // LEFT SIDEBAR (Span 4 of 12)
                    Group::make()

                        ->columnSpan([
                            'default' => 12,
                            'lg' => 4,
                        ])
                        ->schema([
                            Forms\Components\TextInput::make('name')
                            // Place left sidebar components here
                        ]),

                    // RIGHT CONTENT AREA (Span 8 of 12)
                    Group::make()
                        ->columnSpan([
                            'default' => 12,
                            'lg' => 8,
                        ])
                        ->schema([
                            Forms\Components\TextInput::make('name')
                            // Place main content components here
                        ]),
                ]),
        ]);
    }

public static function form(Schema $schema): Schema
    {
        return $schema->schema([
            Grid::make(12)
                ->schema([

                    // LEFT SIDEBAR (Span 4 of 12)
                    Group::make()

                        ->columnSpan([
                            'default' => 12,
                            'lg' => 4,
                        ])
                        ->schema([
                            Forms\Components\TextInput::make('name')
                            // Place left sidebar components here
                        ]),

                    // RIGHT CONTENT AREA (Span 8 of 12)
                    Group::make()
                        ->columnSpan([
                            'default' => 12,
                            'lg' => 8,
                        ])
                        ->schema([
                            Forms\Components\TextInput::make('name')
                            // Place main content components here
                        ]),
                ]),
        ]);
    }

dissto•4d ago

here is one of many ways to achieve this:

    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->columns(12)
            ->components([
                Group::make([
                    Section::make()->heading('LEFT 1')->schema([]),

                    Section::make()->heading('LEFT 2')->schema([]),

                    Section::make()->heading('LEFT 3')->schema([]),
                ])->columnSpan(4),


                Group::make([
                    Section::make()->heading('RIGHT 1')->schema([]),

                    Group::make([
                        Section::make()->heading('RIGHT 2')->schema([]),

                        Section::make()->heading('RIGHT 3')->schema([]),
                    ])->columns(2),
                ])
                    ->columnSpan(8),
            ]);
    }

    public static function configure(Schema $schema): Schema
    {
        return $schema
            ->columns(12)
            ->components([
                Group::make([
                    Section::make()->heading('LEFT 1')->schema([]),

                    Section::make()->heading('LEFT 2')->schema([]),

                    Section::make()->heading('LEFT 3')->schema([]),
                ])->columnSpan(4),


                Group::make([
                    Section::make()->heading('RIGHT 1')->schema([]),

                    Group::make([
                        Section::make()->heading('RIGHT 2')->schema([]),

                        Section::make()->heading('RIGHT 3')->schema([]),
                    ])->columns(2),
                ])
                    ->columnSpan(8),
            ]);
    }

SoundmitOP•4d ago

the second half is empty thank you!

dissto•4d ago

you could probably interchange Group and Grid from my example... group is just personal preference 😛 i think your example just needs a ->columns(1) on the $schema . Its 2 columns by default though

Dennis Koch•4d ago

👆🏽 This. Or ->columnSpanFull() on the outer Grid with 12 columns.

Gaming

Programming

Form with 1/4 and 3/4 cols

Did you find this page helpful?