topic Re: How do I center a SingleValue displayed in a panel? in Dashboards & Visualizations

How do I center a SingleValue displayed in a panel?

beaumaris — Tue, 29 Jun 2010 02:28:15 GMT

We have a dashboard that has a number of panels (2 rows with 3 panels each). The second row has a SingleValue element displayed in each of the 3 panels, but the elements are left-justified inside the panel and we would like them centered. The docs for SingleValue and the surrounding modules don't seem to have a parameter that we can set to determine where the SingleValue is displayed within the panel

Re: How do I center a SingleValue displayed in a panel?

ftk — Tue, 29 Jun 2010 03:06:20 GMT

You can edit the stylesheet definitions for the SingleValue panels. You can either do this system wide in

$SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/css/skins/default/default.css

or at a splunk app level in

$SPLUNK_HOME/etc/apps/YOUR_APP_NAME/appserver/static/application.css

The class you need to modify is .SingleValueHolder.

W3C guide on centering things with CSS: http://www.w3.org/Style/Examples/007/center

[edit:] In addition you should be able to define a custom class in your application.css stylesheet and then apply it to the SingleValue module using the additionalClass parameter. This would probably be the cleaner approach. Rather than centering all SingleValue modules this way you can control which ones will be centered. Check out the available params: http://www.splunk.com/base/Documentation/4.1/Developer/ModuleReference#SingleValue

Re: How do I center a SingleValue displayed in a panel?

beaumaris — Tue, 29 Jun 2010 04:05:34 GMT

Worked perfectly, the following simple snippet did the trick:

.SingleValueHolder {
margin-left: auto ;
margin-right: auto ;
}

Re: How do I center a SingleValue displayed in a panel?

Parameshwara — Fri, 12 Apr 2013 04:19:27 GMT

This worked for me instead:

/* SingleValue position*/
.SingleValue .SingleValueHolder {
color:#111111;
font-size:15px;
font-weight:300;
width: auto;
min-width: 100%;
}

Re: How do I center a SingleValue displayed in a panel?

Parameshwara — Fri, 12 Apr 2013 04:21:21 GMT

using auto on margin left & right didn't work for me. Instead using:

width: auto;
min-width: 100%;

worked for me.