Dashboards & Visualizations

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

jensonthottian
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

frobinson_splun
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

Lindaiyu
Path Finder

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

It works for Splunk Vesion 6.3

0 Karma

sweetlile
Explorer

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

0 Karma

frobinson_splun
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

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

antonyhan
Path Finder

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

0 Karma

Lindaiyu
Path Finder

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

0 Karma

viswanathsd
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

jensonthottian
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

Lindaiyu
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

sweetlile
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

jensonthottian
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

jensonthottian
Contributor

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

The above CSS addition did resolve my issue.

richielynch89
Path Finder

Thanks Jenson, this worked for me on v7.1

0 Karma

frobinson_splun
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
.conf21 Now Fully Virtual!
Register for FREE Today!

We've made .conf21 totally virtual and totally FREE! Our completely online experience will run from 10/19 through 10/20 with some additional events, too!