How to remove "Select" header from Responsive (Card) Layout for the Alarm Status Table (v8.1.17)

I am attempting to use the Responsive Layout (rows are converted to cards) feature of the Alarm Status Table to present active alarms in narrow-width format with a minimal set of informative data (Active Time, Label and Name), however It seems I cannot get rid of the “Select” text which I presume is intended as a header for the selection text box on the left of each alarm card.

Any ideas on how to remove the “Select” text? I figure this is either a bug or something terribly simple that I am overlooking.

image

Tried changing the selection>active>mode setting between single/multiple/none with no effect.
Disabling all columns under columns>active still leaves the “Select” text.

Ignition v8.1.17

Do you need the column headings at all? I find them redundant as it should be obvious what the field is showing without the need for headers, especially in the mobile version which has very limited real estate.

This is how you can remove all of the headings in the responsive display:

Thanks for the response and the reference.

Can that be implemented and applied as a style class in the designer UI, if so how (not clear to me)?
Or, do I need to look at custom style sheets as described in %installDirectory%\data\modules\com.inductiveautomation.perspective\themes\README.md ? That is a world I haven’t delved into thus far (as far as Ignition goes), I have some general familiarity with CSS outside Ignition.

A nudge in the right direction would be appreciated.

You should be able to apply this within a style class.

Inside a style class you won’t use, add this to one of the text-field CSS properties in the style editor:

;} .ia_alarmStatusTableComponent .ia_table__cell[data-column-id="label"] { flex: 0 1 0 !important;

I haven’t tested this…

That “Select” entry is a bug that we resolved in a recent version of Ignition. It was fixed in 8.1.18.

1 Like

wont work like that,
it will have to include the classname in the selector with “psc-” infront

} .psc-YOURSTYLECLASSNAMEFORHIDDENLABEL.ia_alarmStatusTableComponent .ia_table__cell[data-column-id="label"] { flex: 0 1 0 !important;}{

note: there might or might not be need for a space between .psc-YOURSTYLECLASSNAMEFORHIDDENLABEL.ia_alarmStatusTableComponent, you’ll have to try it out,

OK, so I am quite intrigued by and curious about the feedback from @nminchin and @victordcq and what appears to be the ability to do CSS injection.

I added the text provided by @nminchin to the font-family property of a new style class and it works as advertised, globally removes the labels from the card view of the Alarm Status Table. Note that the new style class this is embedded in is not applied directly to anything at all.
image

I was hoping that the revision provided by @victordcq would allow me to associate the change to a style class and apply the change more selectively to Alarm Status Table components (and provide better traceability). However I only found success applying the referenced style class selectively to an Alarm Status Table component instance after removing the .ia_alarmStatusTableComponent CSS selector, which does not quite make sense to me.
image

In any case thanks for improving my awareness of more advanced CSS manipulation options.

Note both of these approaches still leave an empty line where the “Select” text used to be, so not quite a complete fix for my original problem though there is probably some additional CSS trickery that could do it. I’ll be upgrading to v8.1.18 soon.
image

I suggest the ability to select whether to show or hide the labels, in the card view, from the UI, would be a good feature addition.

if you had to remove this it means you should not put a space between .psc-Test/NewStyle.ia_alarmStatusTableComponent

you can select that row with: Though becareful if they remove this row on an update , than you would make something else invisible. So keep this good documented like indeed with a styleclass.

.ia_alarmStatusTableComponent .ia_table__row[data-row-index="1"]{display:none;}