Dashboards & Visualizations

How does one change results table font size in a dashboard for an app?

jtrucks
Splunk Employee
Splunk Employee

I want to change the font size in the displayed results in a table on a dashboard. The dashboard is part of an app I'm building for viewing on large displays (1080p). The app has a dashboard.css file which is then the default for all dashboards, but I can't figure out where or how to change the table font (or cell size to upscale the whole thing).

The default font size (12px is what my inspector shows is the calculated value) is too small for easy viewing on a large screen from even a modest distance.

I think I need to change/override the .results-table {} font size for the font, but where would I put that if that is correct? If this is incorrect, what element do I override and where do I out this in my local app's dashboard.css file?

--
Jesse Trucks
Minister of Magic
1 Solution

alacercogitatus
SplunkTrust
SplunkTrust

One must consult one's own conscious. For only within inner enlightenment, one can find proper balance of CSS. As humbly as the Gaia, one must place the following upon the end of the dashboard.css.

.results-table .wrapped-results th, .results-table .wrapped-results td {
    font-size: 2em;
}

This zen of CSS should override the narcissistic tendencies of the native CSS. If your inner enlightenment is not found with said zen, contact The Enlightened of IRC.

Once changed, the cache of Splunk must be invalidated. To perform this feat of inner strength, use the following access methodology:

https://yoursplunk/en-US/_bump

There you shall hit the button to invalidate the cache and cause supreme knowledge transfer.

View solution in original post

alacercogitatus
SplunkTrust
SplunkTrust

One must consult one's own conscious. For only within inner enlightenment, one can find proper balance of CSS. As humbly as the Gaia, one must place the following upon the end of the dashboard.css.

.results-table .wrapped-results th, .results-table .wrapped-results td {
    font-size: 2em;
}

This zen of CSS should override the narcissistic tendencies of the native CSS. If your inner enlightenment is not found with said zen, contact The Enlightened of IRC.

Once changed, the cache of Splunk must be invalidated. To perform this feat of inner strength, use the following access methodology:

https://yoursplunk/en-US/_bump

There you shall hit the button to invalidate the cache and cause supreme knowledge transfer.

OzzySplunker
Loves-to-Learn Lots

This does not seem to work for Splunk Cloud as we can't access the dashboard.css file.

 

Any words of wisdom here?

0 Karma

moisesroth
Path Finder

You can use some others configurations to make it bigger like:

.results-table .wrapped-results th, .results-table .wrapped-results td {
font-size: 25px;
height: 25px;
vertical-align: middle;

0 Karma

ramirezenyor
Engager

This work for all dashboard, i will like only for one dashboard spefic.

Anmar0293
Path Finder

@ramirezenyor did you resolve the problem. I want it to be in one dashboard also.

0 Karma

jtrucks
Splunk Employee
Splunk Employee

This worked perfectly! I set it to 20px size to force it a bit bigger but not so it felt overstuffed in the cells (which avoids changing the cell sizes).

--
Jesse Trucks
Minister of Magic
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Get Updates on the Splunk Community!

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...

Data Persistence in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. What happens if the OpenTelemetry collector ...

Thanks for the Memories! Splunk University, .conf25, and our Community

Thank you to everyone in the Splunk Community who joined us for .conf25, which kicked off with our iconic ...