# Dashboard - Fixed Grid With Auto Width

**URL:** <https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 20, 2022, 5:30am UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439 "2022-10-20T05:30:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nikolai\_Wolterstorff](https://avatars.discourse-cdn.com/v4/letter/n/35a633/32.png) [@Nikolai\_Wolterstorff](https://forum.inductiveautomation.com/u/Nikolai_Wolterstorff)\
**Post date:** [October 20, 2022, 5:30am UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/1 "2022-10-20T05:30:07Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/718fdd3ef5125c5410574e1f7db2bccd5e58217c.png)

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 20, 2022, 8:40am UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/2 "2022-10-20T08:40:13Z")

</div>

like so?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/26a879e923b719c53c3febca9fd0ecf94d52f2e9.png)

```auto
.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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/2938cd0a9e13872827ce3361ff91ef959afc7d83.png)  
(note it might not look like this in the designer, just on the browsers)

---

<div class="post-metadata">

**Author:** ![Nikolai\_Wolterstorff](https://avatars.discourse-cdn.com/v4/letter/n/35a633/32.png) [@Nikolai\_Wolterstorff](https://forum.inductiveautomation.com/u/Nikolai_Wolterstorff)\
**Post date:** [October 20, 2022, 2:09pm UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/3 "2022-10-20T14:09:52Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/f/2f084807297de8520f0d38788757568b371b8ee1.png)  
After:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/9/e97f5b50abcf8c7ac330281d1c6abac0b448cc71.png)

I tried with a Style Class as well:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/1/b106b3b807205a86b9e599ce49be1cb4d992157c.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/70bc022ee59eac3ebed7346e1bbecec3e55a04b9.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/8/0806925e8cf6b89534b8025026bb15c2cf38fa20.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 20, 2022, 2:29pm UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/4 "2022-10-20T14:29:23Z")

</div>

what is that blank thing behind the dashboard?

---

<div class="post-metadata">

**Author:** ![Nikolai\_Wolterstorff](https://avatars.discourse-cdn.com/v4/letter/n/35a633/32.png) [@Nikolai\_Wolterstorff](https://forum.inductiveautomation.com/u/Nikolai_Wolterstorff)\
**Post date:** [October 20, 2022, 2:30pm UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/5 "2022-10-20T14:30:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 20, 2022, 2:33pm UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/6 "2022-10-20T14:33:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 20, 2022, 2:44pm UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/7 "2022-10-20T14:44:14Z")

</div>

```auto
.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

---

<div class="post-metadata">

**Author:** ![Nikolai\_Wolterstorff](https://avatars.discourse-cdn.com/v4/letter/n/35a633/32.png) [@Nikolai\_Wolterstorff](https://forum.inductiveautomation.com/u/Nikolai_Wolterstorff)\
**Post date:** [October 20, 2022, 2:59pm UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/8 "2022-10-20T14:59:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 20, 2022, 3:01pm UTC](https://forum.inductiveautomation.com/t/dashboard-fixed-grid-with-auto-width/65439/9 "2022-10-20T15:01:59Z")

</div>

oops yes, i'll edit it