Forum
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.
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.
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:
Second, at < 768px viewport. Relevant Perch admin CSS rules (amongst others), shown in the dev tools sources panel, are:
Third, at < 768px when I override the above rules with my own CSS:
Thanks for any help or ideas.
I'll take a look and see what we can do.
Thanks, the above fieldtype is on GitHub if you need a live example.