Reorder form components based on screen size.

Basically, I have 2 form sections: a main section, and a config section. On screen sizes of

lg

lg

or larger I'd like the config section to be to the right of the main section, but on mobile screens I want the config section to stack on top of the main section.

Because the display for a form is

grid

grid

, I can't add an extra attribute of

flex-row-reverse

flex-row-reverse

. And filament (to my knowledge) doesn't allow me to add classes or inline styles to the direct child elements of this grid. Otherwise the solution would be a simple

order-first

order-first

and

order-last

order-last

.

I also attempted using the

->columnStart()

->columnStart()

method, but that didn't reorder the sections, it simply created a weird offset on desktop.

Is there any non-hackish way to solve this issue?

Filament•2y ago•

2 replies

eliaszobody

Reorder form components based on screen size.

Basically, I have 2 form sections: a main section, and a config section. On screen sizes of

lg

lg

or larger I'd like the config section to be to the right of the main section, but on mobile screens I want the config section to stack on top of the main section.

Because the display for a form is

grid

grid

, I can't add an extra attribute of

flex-row-reverse

flex-row-reverse

. And filament (to my knowledge) doesn't allow me to add classes or inline styles to the direct child elements of this grid. Otherwise the solution would be a simple

order-first

order-first

and

order-last

order-last

.

I also attempted using the

->columnStart()

->columnStart()

method, but that didn't reorder the sections, it simply created a weird offset on desktop.

Is there any non-hackish way to solve this issue?

Reorder form components based on screen size.

Similar Threads

Reorder form components based on screen size.

Similar Threads

Similar Threads

Similar Threads