Dashboards & Visualizations

After upgrade to Splunk 6.3 : Dashboard single value elements are now off position.

Contributor

.single-value .single-result and .single-value:before are having line-breaks in between.

Dashboard visualization broke after upgrade to 6.3 for single value elements. Seems like the new svg container is adding some inline parameters to the single value element and creating line breaks between before and value.

XML

<label>tttttt</label>
  <description/>
  <searchTemplate>xxxxx
  </searchTemplate>
  <row>


<panel>
  <single id="abc" >
    <searchPostProcess>| where marketName="abc"</searchPostProcess>
    <option name="classField">range</option>
    <option name="field">Severity</option>
    <option name="linkView">abc</option>
    <option name="linkFields">result</option>
    <option name="refresh.auto.interval">120</option>
    <option name="refresh.time.visible">false</option>

  </single>
</panel>
</row>
</dashboard>

CSS

.single-value .single-result {
    font-size: 18px !important;
    word-wrap: break-word !important;
    font-family: sans-serif;
    font-style: normal;
    color: #6699CC;
}
.single-value:before {
    font-family: "Splunk Icons";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: 30px;
}
.dashboard-row1 #abc {
position: absolute;
left: 132px;
top: 356px;
}
0 Karma
1 Solution

Splunk Employee
Splunk Employee

Hi @jensonthottian,
There were significant changes to single value for 6.3, so custom CSS rules may be impacted. Custom CSS for positioning and icons is not (and hasn't been) supported. As a suggestion for adapting your dashboard, we wanted to suggest the Custom Decorations example in the Dashboard Examples App:
https://splunkbase.splunk.com/app/1603/

Hope this helps!
All the best,
@frobinson_splunk

View solution in original post

Path Finder

Hello, use custom CSS works.
just add
.single-result
{
font-size: 20px !important;
}

It works for Splunk Vesion 6.3

0 Karma

Explorer

I tested your solution, it doesn't work in my case 😕

0 Karma

Splunk Employee
Splunk Employee

Hi @jensonthottian,
There were significant changes to single value for 6.3, so custom CSS rules may be impacted. Custom CSS for positioning and icons is not (and hasn't been) supported. As a suggestion for adapting your dashboard, we wanted to suggest the Custom Decorations example in the Dashboard Examples App:
https://splunkbase.splunk.com/app/1603/

Hope this helps!
All the best,
@frobinson_splunk

View solution in original post

Contributor

Has anyone been able to force a font size of a single value using css since release of 6.3? I've tried everything I can think of and can not.

Path Finder

I have the same problem!
the font size is way too big than needed.

0 Karma

Path Finder

Hello, I got the solution. Please see my answer below!
Hope it helps!
Daiyu

0 Karma

Path Finder

frobinson,Is there any update on this?As we are also facing same issue,it is appearing as odd,its not appearing good in 6.3.1.
Please advice.

0 Karma

Contributor

Hi Viswanath,

I used the image overlay with single value, in that way I didnt have to override the svg-container. Rewrote my dashboard.

Refer - in Splunk dashboard examples app combine :

  1. Image overlay with single value
  2. Custom decorations -first example

Regards,
Jenson

0 Karma

Path Finder

Hello Jenson,
You said that you used the image overlay with single value. In version 6.3.x, the font size by default is larger than before, how you solved this problem?

Thank you very much for your replying.
Daiyu

0 Karma

Explorer

I have the same problem about the font size, I tried different solutions but it doesn't work.
I added CSS code in the XML file and even tried to override using the HTML File but it does not work at all.
How can we override the font-size by default ?

Thank you

0 Karma

Contributor

Can we override the below in custom CSS

svg.svg-container {
height=x% !important;
width=y% !important;
}

text.single-result
{
x=20.49 !important;
}

0 Karma

Contributor

svg.svg-container
{
height: 75% !important;
width: 75% !important;
}

The above CSS addition did resolve my issue.

Path Finder

Thanks Jenson, this worked for me on v7.1

0 Karma

Splunk Employee
Splunk Employee

Hi @jensonthottian,
I'm a tech writer here at Splunk and am looking into this with our engineering team. I'll report back to get more details or with an update ASAP.

All best,
@frobinson_splunk

0 Karma
Don’t Miss Global Splunk
User Groups Week!

Free LIVE events worldwide 2/8-2/12
Connect, learn, and collect rad prizes and swag!