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
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...