Filament•3mo ago

Custom page layout divide in 3 columns

I created custom page and want to split page content into 3 columns? I try all of tailwinds flex/grids, etc.., nothing works. Is there is some way to implement this?

Solution:

Personally, I would use the Form builder with split layout to do it https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#adding-the-form https://filamentphp.com/docs/3.x/forms/layout/split...

Split - Form Builder - Filament

Adding a form to a Livewire component - Form Builder - Filament

Jump to solution

13 Replies

LeandroFerreira•3mo ago

if you are using classes that are not already used in Blade files, you should customize a theme https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

AlexAnder•3mo ago

<x-filament-panels::page>
    <x-filament::section>
        <form wire:submit="search_by_code">
            <div class="flex gap-4">
                <div class="flex flex-col">
                    <x-filament::input.wrapper :valid="! $errors->has('id_code')">
                        <x-filament::input
                                type="text"
                                wire:model="id_code"
                        />
                    </x-filament::input.wrapper>
                    <div>
                        @error('id_code') <span class="text-danger-600">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="flex">{{ $atrada }}</div>
                <div class="flex">{{ $atrada }}</div>
            </div>
        </form>
    </x-filament::section>
</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament::section>
        <form wire:submit="search_by_code">
            <div class="flex gap-4">
                <div class="flex flex-col">
                    <x-filament::input.wrapper :valid="! $errors->has('id_code')">
                        <x-filament::input
                                type="text"
                                wire:model="id_code"
                        />
                    </x-filament::input.wrapper>
                    <div>
                        @error('id_code') <span class="text-danger-600">{{ $message }}</span> @enderror
                    </div>
                </div>
                <div class="flex">{{ $atrada }}</div>
                <div class="flex">{{ $atrada }}</div>
            </div>
        </form>
    </x-filament::section>
</x-filament-panels::page>

LeandroFerreira•3mo ago

why not a form builder with split? https://filamentphp.com/docs/3.x/forms/layout/split

Split - Form Builder - Filament

AlexAnder•3mo ago

I need search imput and on submit return portrait

LeandroFerreira•3mo ago

could you share a screenshot with the result?

AlexAnder•3mo ago

In result I want like that:

LeandroFerreira•3mo ago

your code should show this.. what is the issue?

AlexAnder•3mo ago

Screenshot is from dashboard->filterForms But I want to create custom page, where portraits shows from <img src="">... not fileupload Dashboard filterForms doesn't have form with submit and show the result in the same page

LeandroFerreira•3mo ago

Your first question was I created custom page and want to split page content into 3 columns? This will create 3 columns 🤷‍♂️

<div class="flex gap-4">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

<div class="flex gap-4">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
</div>

AlexAnder•3mo ago

different sizes..

<div class="flex gap-4">
    <div class="size 1/4">One</div>
    <div class="size 2/4">Two</div>
    <div class="size 1/4">Three</div>
</div>

<div class="flex gap-4">
    <div class="size 1/4">One</div>
    <div class="size 2/4">Two</div>
    <div class="size 1/4">Three</div>
</div>

LeandroFerreira•3mo ago

use tailwind to achieve it. If you are using different classes, customize a theme as I told you here: https://discord.com/channels/883083792112300104/1230500202381705218/1230500997953093772

AlexAnder•3mo ago

Thanks. Thanks for Your time.

Solution

LeandroFerreira•3mo ago

Split - Form Builder - Filament

Adding a form to a Livewire component - Form Builder - Filament

Gaming

Programming

Custom page layout divide in 3 columns