CSS nth-child not working in dashboard

bowesmana · ‎06-11-2021

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?

ITWhisperer · ‎06-12-2021

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 · ‎06-13-2021

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.

CSS nth-child not working in dashboard

CSS

Can’t make it to .conf25? Join us online!

Community Content Calendar, September edition

Splunkbase Unveils New App Listing Management Public Preview

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you a member of the Splunk Community?

CSS nth-child not working in dashboard

CSS

Can’t make it to .conf25? Join us online!

Community Content Calendar, September edition

Splunkbase Unveils New App Listing Management Public Preview

Leveraging Automated Threat Analysis Across the Splunk Ecosystem