Dashboards & Visualizations

Why doesn't CSS work in dashboards?

rendie
Path Finder

Hi,
I use this example in my dashboard on local splunk this work:
alt text
But if I use this example in Splunk on Google Cloud Platform, then css doesn't work.
How to fix it?

0 Karma

anthonymelita
Contributor

I'm just discovering the same issue today an found in the release notes that Splunk broke CSS in 7.3.3. This also breaks in-line CSS which I have yet to figure out how to fix.

Uncategorized issues
Date filed  Issue number    Description
2019-12-03  SPL-180371, SPL-175319  CSS outside of <html> tag in SimpleXML doesn't work

Workaround:
Add <style> tag inside of <html> tag, with <p /> in front of the style tag:
<dashboard>
    <label>built-in css</label>
    <row>    
        <panel>      
            <html>
                <p/>
                <style>#text {background: red;}</style>        
                <div id="text">text with red background</div>
            </html>    
        </panel> 
    </row>
</dashboard>

kamlesh_vaghela
SplunkTrust
SplunkTrust

@rendie
Any error you seen in browser console? Can you please share more information like Splunk Version in local and cloud?

0 Karma

rendie
Path Finder

@kamlesh_vaghela No error. Splunk Local is 7.3.1.1, Splunk on Cloud 7.3.3

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...