Dashboard - Fixed Grid With Auto Width

I'm wondering if it's possible to make the perspective dashboard component behave as such:
Fixed grid, cell heights are fixed, but the cell widths grow/shrink to fill available width.
Image describing what's desired:

Any ideas or alternative approaches? Looking to create an "infinite (finite in this case) scroll" feel you'd see on mobile, but trying to stick with using the dashboard component.

like so?

.psc-dashHeight .gridCommon__grid.--fixed {
    grid-template-columns: repeat(5, 1fr) !important;

you can use injection for this or just theme.css or the new stylesheet

(note it might not look like this in the designer, just on the browsers)

1 Like

I feel like this is user error but I am unable to replicate this.


I tried with a Style Class as well:

what is that blank thing behind the dashboard?

It is a widget with no components, just for testing purposes.

heh weird, the compoent seems to behave different when there is nothing in it, give me a sec^^

.psc-dashHeight .gridCommon__grid.--fixed {
    grid-template-columns: repeat(5, 1fr) !important;

this should do it, flexbox doing weird again with autosizing

for flexing rows you'll need to add height:100% too


This works :slightly_smiling_face:
I do believe you meant "width:100%;" instead of "weight:100%;". Changing it to width worked.
Thank you for your help!

1 Like

oops yes, i'll edit it