Dashboard - Fixed Grid With Auto Width

Ignition
,
1

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:

Untitled
Untitled1237×850 52.8 KB

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.

2

like so?

image
image1628×166 12.6 KB 

.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

image
image1194×649 62.7 KB

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

1 Like
3

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

image
image561×503 12.4 KB

After:
image

I tried with a Style Class as well:

image
image1283×396 50.7 KB

image
image957×852 65.8 KB

image
image986×800 66.3 KB

4

what is that blank thing behind the dashboard?

5

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

6

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

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

this should do it, flexbox doing weird again with autosizing

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

2 Likes
8

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
9

oops yes, i'll edit it