Filament•5mo ago

Avoid Section to break and add horizontal scrollbar

I don't want my section to break and instead add a horizontal scrollbar, but I can't get this to work. I tried to add overflow-auto like so

Section::make()
  ->extraAttributes(['class' => 'overflow-auto'])
  ->schema([

Section::make()
  ->extraAttributes(['class' => 'overflow-auto'])
  ->schema([

15 Replies

Dennis Koch•5mo ago

I tried to add overflow-auto like so

That's probably the wrong place, as you want the section content to be scrollable. Not the whole section.

kekitek•5mo ago

Sure I want the whole section to be scrollable, but can't prevent the columns to break. So I want the section to be full width.

Dennis Koch•5mo ago

Wait, columns? Can you share a screenshot?

kekitek•5mo ago

Dennis Koch•5mo ago

And where is the issue? When you resize? Can you share more of your code?

kekitek•5mo ago

Everything breaks into the next line

 Section::make()
    ->extraAttributes(['class' => 'overflow-x-scroll'])
    ->schema([
        RepeatableEntry::make('calculationProjectionsFirstYear')
            ->label('Income')
            ->schema([
                TextEntry::make('gross_rent')
                    ->hiddenLabel(true)
                    ->state('Gross Rent'),

                TextEntry::make('vacancy')
                    ->hiddenLabel(true)
                    ->state('Vacancy'),

                TextEntry::make('operating_income_total')
                    ->hiddenLabel(true)
                    ->state('Operating Income'),
            ])
            ->contained(false)
            ->columnSpan(1),

        RepeatableEntry::make('calculationProjectionsFirstYear')
            ->label('Year 1')
            ->schema([
                TextEntry::make('gross_rent')
                    ->hiddenLabel(true)
                    ->money('AED', 100),

                TextEntry::make('vacancy')
                    ->hiddenLabel(true)
                    ->prefix('- ')
                    ->money('AED', 100),

                TextEntry::make('operating_income_total')
                    ->hiddenLabel(true)
                    ->prefix('= ')
                    ->color(function ($state) {
                        return $this->getFieldColor($state);
                    })
                    ->money('AED', 100),
            ])
            ->contained(false)
            ->columnSpan(1),

More Repeatables

 Section::make()
    ->extraAttributes(['class' => 'overflow-x-scroll'])
    ->schema([
        RepeatableEntry::make('calculationProjectionsFirstYear')
            ->label('Income')
            ->schema([
                TextEntry::make('gross_rent')
                    ->hiddenLabel(true)
                    ->state('Gross Rent'),

                TextEntry::make('vacancy')
                    ->hiddenLabel(true)
                    ->state('Vacancy'),

                TextEntry::make('operating_income_total')
                    ->hiddenLabel(true)
                    ->state('Operating Income'),
            ])
            ->contained(false)
            ->columnSpan(1),

        RepeatableEntry::make('calculationProjectionsFirstYear')
            ->label('Year 1')
            ->schema([
                TextEntry::make('gross_rent')
                    ->hiddenLabel(true)
                    ->money('AED', 100),

                TextEntry::make('vacancy')
                    ->hiddenLabel(true)
                    ->prefix('- ')
                    ->money('AED', 100),

                TextEntry::make('operating_income_total')
                    ->hiddenLabel(true)
                    ->prefix('= ')
                    ->color(function ($state) {
                        return $this->getFieldColor($state);
                    })
                    ->money('AED', 100),
            ])
            ->contained(false)
            ->columnSpan(1),

More Repeatables

Dennis Koch•5mo ago

This is probably not related to overflow but because it’s a grid/flex that is set to one column on smaller viewports?

kekitek•5mo ago

but I set the section columns to 8.

->columns(8),

->columns(8),

I got it to work now with

->columns(['default' => 8]),

->columns(['default' => 8]),

now the columns don't break anymore. But now the problem is the columns shrink, need to prevent this.

Dennis Koch•5mo ago

Yeah, but the default for small viewports is 1

kekitek•5mo ago

I somehow need to preserve the width for the columns

awcodes•5mo ago

You break the columns by passing an array of sizes to the modifier. ``php [ ‘default’ => 1, ‘sm’ => 2, ‘md’ => 4, ‘lg’ => 8, ‘xl’ => null, ] ``` The null is necessary to keep them at 8 above lg in this example.

kekitek•5mo ago

Somehow this does not work How to preserve the width of the columns so, that they are not overlapping I want to preserve exaclty this layout for small devices. So that they have to use the scrollbar to go to the right.

Matthew•4mo ago

Why don't you use a table? Then it will do what you want by default.

kekitek•4mo ago

Solved it by using a different layout. Thank you guys

Gaming

Programming

Avoid Section to break and add horizontal scrollbar