topic Re: CSS nth-child not working in dashboard in Dashboards & Visualizations

CSS nth-child not working in dashboard

bowesmana — Sat, 12 Jun 2021 04:02:01 GMT

I have three versions of Splunk (7.3.1.1, 7.3.3 and 8.1.4)

The following CSS in a dashboard works in two of them, 7.3.1.1 and 8.1.4

#level_row_header .dashboard-cell:nth-child(1) { width:22% !important; }

I suspect it is that the 7.3.3 version has been upgraded from a 7.0.2 version in the past. I am unable to work out what it is that is preventing this from working.

In the 8.1.4 version in the browser inspect window I see this

but in the 7.3.3 I have this

so for whatever reason, it's not picking up the cascading class definition.

It's the same dashboard, same css, same app

Any ideas?

Re: CSS nth-child not working in dashboard

ITWhisperer — Sat, 12 Jun 2021 09:53:50 GMT

Where are you defining the css? If it is in a hidden panel in the SimpleXML, this works differently in 7.3.3. You need an empty element in the html

<panel depends="$stayhidden$"> <html> <div/> <style> #level_row_header .dashboard-cell:nth-child(1) { width:22% !important; } </style> </html> </panel>

Re: CSS nth-child not working in dashboard

bowesmana — Sun, 13 Jun 2021 22:33:56 GMT

Thanks for the reply @ITWhisperer - I ended up upgrading the box to 7.3.9 and it worked after that, but good to know. Yes, it is in CSS in a hidden panel.