Dashboards & Visualizations

CSS nth-child not working in dashboard

bowesmana
SplunkTrust
SplunkTrust

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

bowesmana_0-1623470356511.png

but in the 7.3.3 I have this

bowesmana_1-1623470430675.png

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

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

Any ideas?

 

Labels (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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>

bowesmana
SplunkTrust
SplunkTrust

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.

 

0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...