Remove the column headers from the Alarm Status Table via CSS?


I’m on an ancient version and maybe it’s already solved, but is there any way that I can force the column headings in the responsive alarm status table to go away?
I can do this by setting their flex css manually via the browser dev tools to:
flex: 0 1 0 instead of flex: 50px 1 auto

Will using !important even override something like this where the style has been provided as part of the component rather than as part of the class css? or will the component’s declaration always take precedence?
And if so, how would I select this particular thing i.e. the data-column-id="label"?

you can select attributes like this:


And yes ! important will overrule inline styles

ill take a look at the rest after my lunch break xd

1 Like

Soo for my version 8.1.14 this works:

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

you might want to add .ia_table__cell[data-column-id="card"] in between to be sure it only hits the small card layouts. .ia_alarmStatusTableComponent .ia_table__cell[data-column-id="card"] .ia_table__cell[data-column-id="label"] cuz idk of the label is being used elsewhere in the component

1 Like

How would I add other columns into there as well e.g. data-column-id=“display” ? just add another .ia_table__cell[…] to the end?

Oh wait, that wiped them both out, all good :slight_smile:


Sweet! cheers

1 Like