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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...