Re: 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

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

Are you a member of the Splunk Community?

CSS nth-child not working in dashboard

CSS

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25