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.
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
.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
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
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.
And this is the result, which looks great in my opinion, and saves machine operators from extra clicks to get the information they need.
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
It’s best to create a custom class and use that for your project to avoid this occurring
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!
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.
I found an issue with the first css.
.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.
This might have changed after some updates i guess. these css overrides can break on updates
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.
Not sure how it can be fixed.
what version are you on?
I am on 8.1.31 and also on 8.1.28. Both have the same issue.
i dont really see anything weird on 8.1.28
do you see the same issues while looking in a chrome browser?
I placed them in stylesheet. running it in chrome.
got a copy of the view+stylesheet?