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
Dennis Koch4w 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
kekitek4w 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
Dennis Koch4w ago
Wait, columns? Can you share a screenshot?
kekitek
kekitek4w ago
No description
Dennis Koch
Dennis Koch4w ago
And where is the issue? When you resize? Can you share more of your code?
kekitek
kekitek4w ago
No description
kekitek
kekitek4w 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
Dennis Koch4w 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
kekitek4w 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
Dennis Koch4w ago
Yeah, but the default for small viewports is 1
kekitek
kekitek4w ago
I somehow need to preserve the width for the columns
No description
awcodes
awcodes4w 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
kekitek3w 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
Matthew3w ago
Why don't you use a table? Then it will do what you want by default.
kekitek
kekitek3w ago
Solved it by using a different layout. Thank you guys