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?

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!