Filament•17mo ago

How to make row spacing narrower? tighter?

Is there a simple general way for all resources index (lists) to reduce the blank space between rows? I need to have more rows in the same screen space, so I feel there is too much blank space. Tks.

Solution:

You'd create a custom theme then target the '.fi-' classes to style them how you want.

Jump to solution

6 Replies

Patrick Boivin•17mo ago

I think the simple and general way is with some custom CSS

Albert LensOP•17mo ago

Tks. And which file is the "responsible" for this layout? Or how can I apply new CSS rules to this? Have no hint, please.

Solution

awcodes•17mo ago

You'd create a custom theme then target the '.fi-' classes to style them how you want.

Patrick Boivin•17mo ago

Start here to load a basic .css file: https://filamentphp.com/docs/3.x/support/assets#registering-css-files

Assets - Core Concepts - Filament

Albert LensOP•17mo ago

Thanks. I'll give those a try.

Albert LensOP•17mo ago

Hello. I succedeed in doing what I wanted, all based on your highly appreciated help. I am giving my instructions here, in case it can help others. First I created a robust.css (or whatever name you want) and put it in resouces\css Then I added the following code in app\Providers\AppServiceProvider.php

 public function register(): void
    {
        FilamentAsset::register([
            Css::make('custom-stylesheet', __DIR__ . '/../../resources/css/robust.css'),
        ]);
    }

 public function register(): void
    {
        FilamentAsset::register([
            Css::make('custom-stylesheet', __DIR__ . '/../../resources/css/robust.css'),
        ]);
    }

After that, in console I run: php artisan filament:assets And that is all. In my case, the CSS was for having less top and bottom blank space in every row of every list (index) resources pages. My code for the CSS is:

.fi-ta-text, .fi-ta-cell, .fi-ta-cell>* {
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}

.fi-ta-text, .fi-ta-cell, .fi-ta-cell>* {
    padding-top: 1px!important;
    padding-bottom: 1px!important;
}

Hope it can help other filament newbies as me. 😄

Gaming

Programming

How to make row spacing narrower? tighter?