Why doesn't CSS work in dashboards?

rendie · ‎12-10-2019

Hi,
I use this example in my dashboard on local splunk this work:

But if I use this example in Splunk on Google Cloud Platform, then css doesn't work.
How to fix it?

anthonymelita · ‎12-13-2019

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 · ‎12-10-2019

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

rendie · ‎12-11-2019

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

Why doesn't CSS work in dashboards?

Detecting Remote Code Executions With the Splunk Threat Research Team

Observability | Use Synthetic Monitoring for Website Metadata Verification

More Ways To Control Your Costs With Archived Metrics | Register for Tech Talk