[IGN-3992]CSS: Override base CSS style table component

Ignition
1

Hi,

I have a table with subview activated. The whole table uses a CSS custom definition for the style.
image

However, I am struggling to style the expander of a table to make it a little bit wider. I am able to change the color without problems, but not the width with the following code the custom CSS:

/* Style the expander */
.psc-modern-table .t .tc.tc-expand {
	order: -1;
    	max-width: 100px !important;
	width: 100px !important;
	background-color: red;
}

image

After some debugging in the web browser, i saw that the base CSS definition has set the max-width as "!important"
image

Is there anyway to override the component base CSS in this case?

Thanks!

2

Yes, the css with higher Specificity will apply over other.
In this case since you replaced .table-container with your class, both have the same Specificity
so simply adding in an other class will be enough
.psc-modern-table .table-container .t .tc.tc-expand

Its very weird ignition added an !important in their style though... That is concidered bad practice, especiaally for something we are supposed to be able to edit. First time ive seen it though, must have been a oversight of the css'er

3 Likes
3

OP didn't show the full path so I can't be sure, but I'm pretty sure that isn't an IA provided file. I don't see any !important declarations anywhere in Perspective in our codebase.

4

I have the same as OP:
image

8.1.17 though.

edit: And same thing with a 8.1.31 sandbox

1 Like
5

Huh. I'll have to dig into it further.

1 Like
6

Okay, so it's been this way for a long time, but the educated guess from a more Perspective focused dev is that the hardcoded size is (or was) important to the column logic. But, there is already a ticket to relax that constraint/make the expansion area more customizable, so I've added this thread to that ticket.

1 Like