hqland-app/FILAMENT_LAYOUT_NOTES.md

FILAMENT LAYOUT NOTES - BÀI HỌC KHÔNG QUÊN

Ghi chú nhanh để tránh lặp lại lỗi layout
Ngày: 24/04/2026

---

⚠️ VẤN ĐỀ ĐÃ GẶP

Form tạo biểu mẫu (FormTemplate) bị chia cột: Section 1 và Section 2 nằm cùng hàng ngang thay vì xếp dọc full width.

✅ GIẢI PHÁP

1. Section xếp dọc full width

Section::make('Tên section')
    ->columnSpanFull()  // <-- BẮT BUỘC nếu muốn full width
    ->schema([...])

2. Field chia cột BÊN TRONG Section

Section::make('Thông tin')
    ->columnSpanFull()
    ->schema([
        Grid::make(3)  // Grid chỉ dùng BÊN TRONG Section
            ->schema([
                TextInput::make('name'),
                TextInput::make('code'),
                Select::make('type'),
            ]),
    ])

3. KHÔNG dùng Grid bọc ngoài nhiều Section

// ❌ SAI - Grid bọc ngoài sẽ ép Section vào cột
Grid::make(2)->schema([
    Section::make('A')->schema([...]),
    Section::make('B')->schema([...]),
])

// ✅ ĐÚNG - Section xếp dọc, Grid bên trong
Section::make('A')->columnSpanFull()->schema([
    Grid::make(3)->schema([...])
]),
Section::make('B')->columnSpanFull()->schema([
    Grid::make(3)->schema([...])
]),

4. RichEditor tăng chiều cao

RichEditor::make('content')
    ->extraInputAttributes(['style' => 'min-height: 500px;'])

---

📌 TÓM TẮT 1 DÒNG

Section cần ->columnSpanFull() để full width. Grid::make(3) chỉ dùng bên trong Section để chia field.