Forum

Thread tagged as: Question, Problem, Suggestions

Namespacing Perch admin CSS

I'm running into problems with a fieldtype I'm developing, because some of the core Perch admin CSS is not namespaced.

Specifically, it's the admin table styles that are being applied to the <table> elements of my fieldtype, especially the responsive styles. I've spent some time trying to override the offending styles with my own CSS for the fieldtype, but it's not easy, and in any case there's always the possibility that the core CSS will change in the future.

Any workaround? Would it be possible to get these styles namespaced in a future Perch release?

I can give specific code examples if necessary, but hopefully the above is clear enough.
Simon Ansell

Simon Ansell 1 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

Generally we want our styles to be applied consistently to any field types, but I can see this would be trickier with unusual bits of UI.

If you've got a specific example of your table problem, that would be great.
Simon Ansell

Simon Ansell 1 points

3 years ago

Hi Drew,

Thanks for the quick reply. I've attached some screenshots as that's probably the best way to illustrate the problem. The fieldtype uses a third-party JS table component, so assume no control over the markup (I can't use display: flex, display: grid for example).

First, the fieldtype at wide screen widths. Works great:

Full screen

Second, at < 768px viewport. Relevant Perch admin CSS rules (amongst others), shown in the dev tools sources panel, are:

table thead { display: none; }
table tr { display: block; }
table td { display: block; }

767px

Third, at < 768px when I override the above rules with my own CSS:

.simona_hot table thead { display: block; }
.simona_hot table tr { display: table-row; }
.simona_hot table td { display: table-cell; }

767px override

Thanks for any help or ideas.
Drew McLellan

Drew McLellan 2638 points
Perch Support

3 years ago

I'll take a look and see what we can do.
Simon Ansell

Simon Ansell 1 points

3 years ago

Thanks, the above fieldtype is on GitHub if you need a live example.