Filament•13mo ago

reduce label form gap

I want to reduce the label gap to the input while using inline() attribute.. I want make it like the example on the second image. how can I do it

6 Replies

LeandroFerreira•13mo ago

In my opinion you should use View/Custom layout components and change what you want https://filamentphp.com/docs/2.x/forms/layout#view

Filament

Layout - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

dyo•13mo ago

i've tried with

View::make('filament.forms.url')->schema([
    TextInput::make('slug')->label('url')->disabledOn('edit')->required()
        ->dehydrated(fn (string $context): bool => $context === 'create')
        ->unique(column: 'slug', ignoreRecord: true)
        ->extraInputAttributes([
            'style' => 'border: none;border-bottom: 2px solid #666;outline: none;border-radius: 0;padding: 1px;'
        ])->inlineLabel(),
]),

View::make('filament.forms.url')->schema([
    TextInput::make('slug')->label('url')->disabledOn('edit')->required()
        ->dehydrated(fn (string $context): bool => $context === 'create')
        ->unique(column: 'slug', ignoreRecord: true)
        ->extraInputAttributes([
            'style' => 'border: none;border-bottom: 2px solid #666;outline: none;border-radius: 0;padding: 1px;'
        ])->inlineLabel(),
]),

in in blade

<div>
    {{ $getLabel() }} {{ $getChildComponentContainer() }}
</div>

<div>
    {{ $getLabel() }} {{ $getChildComponentContainer() }}
</div>

what should i do?

LeandroFerreira•13mo ago

View::make('filament.forms.url')
  ->label('url')
  ->schema([
      TextInput::make('slug')->disableLabel()
  ])

View::make('filament.forms.url')
  ->label('url')
  ->schema([
      TextInput::make('slug')->disableLabel()
  ])

dyo•13mo ago

<div>
    <span class="text-sm font-medium">
        Url {{ $getChildComponentContainer() }}</span>
</div>

<div>
    <span class="text-sm font-medium">
        Url {{ $getChildComponentContainer() }}</span>
</div>

i've tried that in blade.. but how to make the text and the component inline..

LeandroFerreira•13mo ago

css 😅 if you don't know css, forget this tip

dyo•13mo ago

ok i'll try to tweak it.. thanks btw, for your suggestion..

Gaming

Programming

reduce label form gap