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

Ignition
,
1

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
image705×122 52.9 KB

image

image

Thanks.

2

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

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

1 Like
3

@Transistor is correct

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

image
image1010×265 23.9 KB

1 Like
4

That works!

5

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

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?

<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!

6

I fixed using this on stylesheet.css

.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! :+1: :+1: :+1: