# Wrapping label text for Perspective Alarm Status Table

**URL:** <https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 15, 2022, 5:09pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960 "2022-07-15T17:09:01Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skye\_Jenkins](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@Skye\_Jenkins](https://forum.inductiveautomation.com/u/Skye_Jenkins)\
**Post date:** [July 15, 2022, 5:09pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/1 "2022-07-15T17:09:01Z")

</div>

I have an alarm status table that I use in a popup. My label strings are longer than the available column width, and I would like to wrap them. A line break would be acceptable as well. I have tried adding `<html>` and `<br>` to my strings to no avail. From reading other threads, it appears the label field is html, but I can’t figure out how to implement wrapping or line breaks.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/8/2899ad350831d31e8e99dc1a366e6b68af1f2bd0.png)

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

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

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e72c92056b7a050a4b3a67bdcc646c90ef6186e8.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:** [July 18, 2022, 12:21pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/2 "2022-07-18T12:21:11Z")

</div>

Doesnt look like its going to be possible without completely overriding the css for the alarm table as right now it seems like its rows heights or being calculated in script.

I believe this does most of it, but i could have missed something, you’ll have to try it out yourself, you probably also want to use this with a styleclass

```auto
.ReactVirtualized __Grid__ innerScrollContainer{
  height: auto !important;
  max-height:auto !important;
  overflow-y: auto !important;
}
.alarmTable .alarmTableBodyRow{
  position: relative !important;
  top:unset !important;
  height: auto !important;
}
.alarmTable .content>div{
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
}

```

I think i got everything, doesnt rly look that good yet, but you’ll have to find the rest yourself xd

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

If you are unfamiliar with css i suggest you can always force the user to click on the details to view the message. it will also look better that way xd

---

<div class="post-metadata">

**Author:** ![Skye\_Jenkins](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@Skye\_Jenkins](https://forum.inductiveautomation.com/u/Skye_Jenkins)\
**Post date:** [July 18, 2022, 4:07pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/3 "2022-07-18T16:07:46Z")

</div>

Yes! This worked great vistordcq. I really appreciate your help. 😃

For those that find this in the future. The solution was to modify the alarm-table.css class located at ‘Ignition installation directory\data\modules\com.inductiveautomation.perspective\themes\light\common’  
Because all of the css themes use light as their base, this will carry over to other themes as well.

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

And this is the result, which looks great in my opinion, and saves machine operators from extra clicks to get the information they need.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/a/4a957a8957ac84bb527f932acab9a18dbc7d109f.png)

---

<div class="post-metadata">

**Author:** ![Matthew.gaitan](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@Matthew.gaitan](https://forum.inductiveautomation.com/u/Matthew.gaitan)\
**Post date:** [July 18, 2022, 4:18pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/4 "2022-07-18T16:18:54Z")

</div>

Please be aware that any changes to those files will be overwritten upon gateway start up (See Caution dialog at the top)  
[https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes#PerspectiveBuiltInThemes-ThemeColors](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes#PerspectiveBuiltInThemes-ThemeColors)

It’s best to create a custom class and use that for your project to avoid this occurring

---

<div class="post-metadata">

**Author:** ![Skye\_Jenkins](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@Skye\_Jenkins](https://forum.inductiveautomation.com/u/Skye_Jenkins)\
**Post date:** [July 18, 2022, 5:08pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/5 "2022-07-18T17:08:08Z")

</div>

That is a great point Mathew. I did exactly as you said and created a custom class. And now my changes stick after gateway rebooting. Thanks! 👍

---

<div class="post-metadata">

**Author:** ![Chris\_Hitchings](https://avatars.discourse-cdn.com/v4/letter/c/e95f7d/32.png) [@Chris\_Hitchings](https://forum.inductiveautomation.com/u/Chris_Hitchings)\
**Post date:** [October 12, 2022, 7:45pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/6 "2022-10-12T19:45:58Z")

</div>

Hi there, I want to do the same thing but in the non Perspective Alarm Status Table(normal client). Is there a way to do this.

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 13, 2023, 1:16am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/7 "2023-09-13T01:16:25Z")

</div>

I found an issue with the first css.

```auto
.ReactVirtualized __Grid__ innerScrollContainer{
  height: auto !important;
  max-height:auto !important;
  overflow-y: auto !important;
}

```

if `height: auto !important;` is enabled, when placing a table component on the view, it won't display values/rows, even there are data in it.

With the above statement disabled, the text can still wrap in the record.

---

<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:** [September 13, 2023, 6:44am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/8 "2023-09-13T06:44:22Z")

</div>

This might have changed after some updates i guess. these css overrides can break on updates

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 17, 2023, 11:23am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/9 "2023-09-17T11:23:29Z")

</div>

found another issue after adding the css.  
When scrolling down the alarm table, the lower section of the page started flashing.  
I cannot record the video, but from the picture below, the bottom part is flashing.  
I tested all of the css declaration, the following setting is causing the issue. but if it's disabled, the text wrap function won't work.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/93d7e9e44b66061c8001a8aa38f2f4a488b3141b.png)

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

Not sure how it can be fixed.

---

<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:** [September 18, 2023, 6:41am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/10 "2023-09-18T06:41:30Z")

</div>

what version are you on?

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 18, 2023, 8:34am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/11 "2023-09-18T08:34:04Z")

</div>

I am on 8.1.31 and also on 8.1.28. Both have the same issue.

---

<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:** [September 18, 2023, 9:16am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/12 "2023-09-18T09:16:48Z")

</div>

i dont really see anything weird on 8.1.28

do you see the same issues while looking in a chrome browser?

---

<div class="post-metadata">

**Author:** ![chaoliang](https://avatars.discourse-cdn.com/v4/letter/c/ba8739/32.png) [@chaoliang](https://forum.inductiveautomation.com/u/chaoliang)\
**Post date:** [September 18, 2023, 9:53am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/13 "2023-09-18T09:53:15Z")

</div>

I placed them in stylesheet. running it in chrome.

---

<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:** [September 18, 2023, 10:58am UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/14 "2023-09-18T10:58:41Z")

</div>

got a copy of the view+stylesheet?

---

<div class="post-metadata">

**Author:** ![Henrique\_Trebilcock](https://avatars.discourse-cdn.com/v4/letter/h/8edcca/32.png) [@Henrique\_Trebilcock](https://forum.inductiveautomation.com/u/Henrique_Trebilcock)\
**Post date:** [June 10, 2025, 4:38pm UTC](https://forum.inductiveautomation.com/t/wrapping-label-text-for-perspective-alarm-status-table/61960/15 "2025-06-10T16:38:47Z")

</div>

I had same problem when developing my application. I came across following css to outcome my problem.

.ia\_table\_\_cell .content div {  
white-space: normal !important;  
overflow-wrap: break-word;  
display: -webkit-box;  
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical;  
overflow: hidden;  
}