Dashboards & Visualizations

aligning single value output.

smolcj
Builder

hi all,
i am using several single value results in my dashboard and i am using the tags.
the code sample is like this and repeated several times.




blabla

ServerName:

so my output is like

labe1:value
labelllll2:value2
la:value3
how to align it like
label : value1
labelllll2 : value2
la : value3
please help..
thankyou

Tags (1)
0 Karma
1 Solution

jonuwz
Influencer

Not easily with CSS, and since its unlikely the font you'll be using is monospaced, it wont be easy to correct the spacing with padding.

This CSS :

.singleLabel {
    display: inline-block;
    min-width: 80px;
    text-align: right;
}
.singleResult {
    display: inline-block;
    min-width: 80px;
    text-align: left;
}

should line up your data ( you might have to play with the widths )

but it'll look like this :

         label : value1
    labelllll2 : value2
            la : value3

How to apply custom CSS

View solution in original post

jonuwz
Influencer

Not easily with CSS, and since its unlikely the font you'll be using is monospaced, it wont be easy to correct the spacing with padding.

This CSS :

.singleLabel {
    display: inline-block;
    min-width: 80px;
    text-align: right;
}
.singleResult {
    display: inline-block;
    min-width: 80px;
    text-align: left;
}

should line up your data ( you might have to play with the widths )

but it'll look like this :

         label : value1
    labelllll2 : value2
            la : value3

How to apply custom CSS

Get Updates on the Splunk Community!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Get the T-shirt to Prove You Survived Splunk University Bootcamp

As if Splunk University, in Las Vegas, in-person, with three days of bootcamps and labs weren’t enough, now ...

Wondering How to Build Resiliency in the Cloud?

IT leaders are choosing Splunk Cloud as an ideal cloud transformation platform to drive business resilience,  ...