# Hide AlarmStatusTable scrollbar

**URL:** <https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [August 29, 2023, 10:51am UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505 "2023-08-29T10:51:50Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![reto.kunz](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@reto.kunz](https://forum.inductiveautomation.com/u/reto.kunz)\
**Post date:** [August 29, 2023, 10:51am UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/1 "2023-08-29T10:51:50Z")

</div>

I want to use the Perspective AlarmStatusTable to show only one single alarm in the header.  
There are certainly other options to achieve this, but this component is very handy because of its filter options. I use them to determine which alarm is shown in the header.

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

Unfortunately I can not get rid of the scrollbar. I even created a css class which applies **overflow: hidden !important** to the component and all sub-elements. In the development tools I can not find one single scroller or element with overflow auto / scroll. Still there is this scrollbar....

Any ideas how to get rid of it?

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [August 29, 2023, 11:43am UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/2 "2023-08-29T11:43:22Z")

</div>

Hi,  
Are you talking about this?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/2/528a010441a9ef9e7b74eae4c32c7d82d12a764b.png)

---

<div class="post-metadata">

**Author:** ![reto.kunz](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@reto.kunz](https://forum.inductiveautomation.com/u/reto.kunz)\
**Post date:** [August 30, 2023, 12:06pm UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/3 "2023-08-30T12:06:33Z")

</div>

Seems to be what I want to achieve, yes. (Is this in Perspective?)

How did you get rid of the scrollbar?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 30, 2023, 12:15pm UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/4 "2023-08-30T12:15:19Z")

</div>

If you're ever going to display just one alarm, I'd use `system.alarm.queryStatus`, which also offers a bunch of filtering options, to display the alarm you want in a custom component.  
This will allow a lot more flexibility to make it look exactly like you want.

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [August 31, 2023, 5:01am UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/5 "2023-08-31T05:01:05Z")

</div>

I had enabled the Pager and set InitialOption to 1 and made Active Time column sort by Descending.

---

<div class="post-metadata">

**Author:** ![reto.kunz](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@reto.kunz](https://forum.inductiveautomation.com/u/reto.kunz)\
**Post date:** [September 18, 2023, 8:19am UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/6 "2023-09-18T08:19:28Z")

</div>

This seems to be the easiest solution. Using the Alarm Table component would be handy for its filter options, but restyling it so that no scrollbar appears seems to be an almost impossible task ☹

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 18, 2023, 8:58am UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/7 "2023-09-18T08:58:09Z")

</div>

Just a quick note:

> [@reto.kunz](#):
>
> I even created a css class which applies **override: hidden !important**

The property is `overflow`. I assume that's what you meant, but in case your style class did try to apply an `override` style... it's not going to work :X

That said, I still believe that for one alarm, it's simpler to use `queryStatus`, which also allows filtering iirc.

---

<div class="post-metadata">

**Author:** ![reto.kunz](https://avatars.discourse-cdn.com/v4/letter/r/6a8cbe/32.png) [@reto.kunz](https://forum.inductiveautomation.com/u/reto.kunz)\
**Post date:** [September 18, 2023, 1:01pm UTC](https://forum.inductiveautomation.com/t/hide-alarmstatustable-scrollbar/78505/8 "2023-09-18T13:01:51Z")

</div>

Typo.... of course I meant overflow xD
