Submit button inside section in livewire component

Hi everybody,
I created a livewire component with a form inside.
Everything is running smoothly, but I’m not able to put the the submit button inside the section (and possibly centered).
In the picture what I would like to achieve.
Here the code:
Here the form() inside the livewire component

  public function form(Form $form): Form
  {
    return $form
      ->schema([
        Forms\Components\Group::make()
          ->schema([
            Forms\Components\Section::make($this->entity->name)
              ->schema([
                Repeater::make('exhibitionWines')
                  ->label("Vini per evento")
                  ->relationship()
                  ->simple(
                    Forms\Components\Select::make('wine_id')
                      ->relationship('wine', 'name')
                      // ->options(Wine::where('winery_id', '=', auth()->user()->winery->id)->get()->pluck('name', 'id'))
                      ->native(false)
                      ->preload(),
                  )->addActionLabel('Aggiungi Vino all\'evento'),
              ])->compact()
          ])->columnSpan(2),
      ])
      ->columns(4)
      ->model($this->entity)
      ->statePath('entityData');
  }

  public function form(Form $form): Form
  {
    return $form
      ->schema([
        Forms\Components\Group::make()
          ->schema([
            Forms\Components\Section::make($this->entity->name)
              ->schema([
                Repeater::make('exhibitionWines')
                  ->label("Vini per evento")
                  ->relationship()
                  ->simple(
                    Forms\Components\Select::make('wine_id')
                      ->relationship('wine', 'name')
                      // ->options(Wine::where('winery_id', '=', auth()->user()->winery->id)->get()->pluck('name', 'id'))
                      ->native(false)
                      ->preload(),
                  )->addActionLabel('Aggiungi Vino all\'evento'),
              ])->compact()
          ])->columnSpan(2),
      ])
      ->columns(4)
      ->model($this->entity)
      ->statePath('entityData');
  }

  public function form(Form $form): Form
  {
    return $form
      ->schema([
        Forms\Components\Group::make()
          ->schema([
            Forms\Components\Section::make($this->entity->name)
              ->schema([
                Repeater::make('exhibitionWines')
                  ->label("Vini per evento")
                  ->relationship()
                  ->simple(
                    Forms\Components\Select::make('wine_id')
                      ->relationship('wine', 'name')
                      // ->options(Wine::where('winery_id', '=', auth()->user()->winery->id)->get()->pluck('name', 'id'))
                      ->native(false)
                      ->preload(),
                  )->addActionLabel('Aggiungi Vino all\'evento'),
              ])->compact()
          ])->columnSpan(2),
      ])
      ->columns(4)
      ->model($this->entity)
      ->statePath('entityData');
  }

  public function form(Form $form): Form
  {
    return $form
      ->schema([
        Forms\Components\Group::make()
          ->schema([
            Forms\Components\Section::make($this->entity->name)
              ->schema([
                Repeater::make('exhibitionWines')
                  ->label("Vini per evento")
                  ->relationship()
                  ->simple(
                    Forms\Components\Select::make('wine_id')
                      ->relationship('wine', 'name')
                      // ->options(Wine::where('winery_id', '=', auth()->user()->winery->id)->get()->pluck('name', 'id'))
                      ->native(false)
                      ->preload(),
                  )->addActionLabel('Aggiungi Vino all\'evento'),
              ])->compact()
          ])->columnSpan(2),
      ])
      ->columns(4)
      ->model($this->entity)
      ->statePath('entityData');
  }

And here the blade file:

<div>
  <form wire:submit="create">
    {{ $this->form }}
    <x-filament::button type="submit">
      SALVA I VINI
    </x-filament::button>
  </form>
  <x-filament-actions::modals />
</div>

<div>
  <form wire:submit="create">
    {{ $this->form }}
    <x-filament::button type="submit">
      SALVA I VINI
    </x-filament::button>
  </form>
  <x-filament-actions::modals />
</div>

<div>
  <form wire:submit="create">
    {{ $this->form }}
    <x-filament::button type="submit">
      SALVA I VINI
    </x-filament::button>
  </form>
  <x-filament-actions::modals />
</div>

<div>
  <form wire:submit="create">
    {{ $this->form }}
    <x-filament::button type="submit">
      SALVA I VINI
    </x-filament::button>
  </form>
  <x-filament-actions::modals />
</div>

Solution

Put this code below Repeater, and remove button from blade file

Forms\Components\Placeholder::make('salvaTest')
    ->hiddenLabel()
    ->content(new HtmlString(
        Blade::render('
            <x-filament::button type="submit">
              SALVA I VINI
            </x-filament::button>
        '))
    )
    ->extraAttributes(['class' => 'flex justify-center']),

Forms\Components\Placeholder::make('salvaTest')
    ->hiddenLabel()
    ->content(new HtmlString(
        Blade::render('
            <x-filament::button type="submit">
              SALVA I VINI
            </x-filament::button>
        '))
    )
    ->extraAttributes(['class' => 'flex justify-center']),

Forms\Components\Placeholder::make('salvaTest')
    ->hiddenLabel()
    ->content(new HtmlString(
        Blade::render('
            <x-filament::button type="submit">
              SALVA I VINI
            </x-filament::button>
        '))
    )
    ->extraAttributes(['class' => 'flex justify-center']),

Forms\Components\Placeholder::make('salvaTest')
    ->hiddenLabel()
    ->content(new HtmlString(
        Blade::render('
            <x-filament::button type="submit">
              SALVA I VINI
            </x-filament::button>
        '))
    )
    ->extraAttributes(['class' => 'flex justify-center']),

Jump to solution

Submit button inside section in livewire component

Similar Threads

Similar Threads

Similar Threads