# Perspective - How to remove scroll bar in alarm status table?

**URL:** <https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [May 15, 2024, 12:34pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424 "2024-05-15T12:34:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![GUILHERME\_MARTINS](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@GUILHERME\_MARTINS](https://forum.inductiveautomation.com/u/GUILHERME_MARTINS)\
**Post date:** [May 15, 2024, 12:34pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424/1 "2024-05-15T12:34:48Z")

</div>

Hello,

I'm trying to remove the scrollbar from the alarm status table.

I've already tried setting the root style overflow to hidden or visible, and the alarm status table style overflow to hidden or visible, but there are no changes.

Can someone help me with this?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7e532df9e16effaa3531b772bbbd856606ea5027.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/1/11570e18f60fd27ceb98c9f3dbec6e1f6d758965.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d64dbe6a895028e8926520d2ff49ff14d661271.png)

Thanks.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 15, 2024, 1:33pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424/2 "2024-05-15T13:33:38Z")

</div>

If you repeat your exercise with the header or pager enabled you'll see that the scrollbars only apply to the alarms list - not the whole Alarm Status Table component. That's why modifying the style for the whole component doesn't work.

Using your browser's developer tools you can identify the problem area as

```python
<div aria-label="grid" aria-readonly="true" class="ReactVirtualized__Grid" 
    role="grid" 
    tabindex="0" 
    style="box-sizing: border-box;
           direction: ltr;
           height: 56.1719px;
           position: relative;
           width: 958.172px;
           will-change: transform;
           overflow: hidden auto;"
>

```

Deleting the `auto` on the overflow rule fixes the problem.

Now how to do that in Ignition? I suspect that a rule in stylesheet.css might work.  
Let's see if anyone knows how.

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 16, 2024, 5:12am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424/3 "2024-05-16T05:12:11Z")

</div>

@Transistor is correct

> [@Transistor](#):
>
> stylesheet.css might work

```python
.psc-custom_alarm_table .ReactVirtualized__Grid{
	overflow: hidden !important;
}

```

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

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [May 16, 2024, 7:41am UTC](https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424/4 "2024-05-16T07:41:35Z")

</div>

> [@Ujwal\_Wankhede](#):
>
> ```python
> .psc-custom_alarm_table .ReactVirtualized__Grid{
> overflow: hidden !important;
> }
> 
> ```

That works!

---

<div class="post-metadata">

**Author:** ![GUILHERME\_MARTINS](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@GUILHERME\_MARTINS](https://forum.inductiveautomation.com/u/GUILHERME_MARTINS)\
**Post date:** [May 21, 2024, 5:02pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424/5 "2024-05-21T17:02:41Z")

</div>

Thank you, that really worked for me!

But now it is leaving a blank space at the end. Do you know if that's possible to fill?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/f/efd6b5c770430b0c9160934bfd927bb79d557efa.png)

I've already tried to fix it using the Microsoft Edge DevTools, but every time I change the row width, it gets instantly overridden by the "default" width.

I found out that deleting the class **ia\_alarmTableComponent\_\_body\_\_row** from the div classes, i get able to change the width to 100%.

But, how to do it?

is it possible to do using the stylesheet.css?

```python
<div class="tr ia_table __row ia_table__ body __row undefined alarmTableBodyRow ia_alarmTableComponent__ body__row" 
     data-row-index="2" 
     data-row-id="465658f3-cf92-4162-a6aa-5850bc8566a7" 
     style="
         background-color: rgb(249, 0, 0); 
         font-weight: 500; 
         color: rgb(255, 255, 255); 
         font-size: 16px; 
         height: 30px; 
         max-height: 10px; 
         left: 0px; 
         position: absolute; 
         top: 60px; 
         width: 1139.47px;
     ">
</div>

```

Thank you!

---

<div class="post-metadata">

**Author:** ![GUILHERME\_MARTINS](https://avatars.discourse-cdn.com/v4/letter/g/e9bcb4/32.png) [@GUILHERME\_MARTINS](https://forum.inductiveautomation.com/u/GUILHERME_MARTINS)\
**Post date:** [May 21, 2024, 5:52pm UTC](https://forum.inductiveautomation.com/t/perspective-how-to-remove-scroll-bar-in-alarm-status-table/90424/6 "2024-05-21T17:52:45Z")

</div>

I fixed using this on stylesheet.css

```python
.ReactVirtualized__Grid {
	overflow: hidden !important;
}

div.ia_alarmTableComponent __body__ row {
    width: 100% !important;
}

.ReactVirtualized __Grid__ innerScrollContainer{
	width: 100% !important;
	max-width: 100% !important;
}

.column-group tr{
	width: 100% !important;
}

```

Thank you all for the help! 👍 👍 👍