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?

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.

View solution in original post

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).

Did you miss .conf21 Virtual?

Good news! The event's keynotes and many of its breakout sessions are now available online, and still totally FREE!