.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;
}
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
Hello, use custom CSS works.
just add
.single-result
{
font-size: 20px !important;
}
It works for Splunk Vesion 6.3
I tested your solution, it doesn't work in my case 😕
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
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.
I have the same problem!
the font size is way too big than needed.
Hello, I got the solution. Please see my answer below!
Hope it helps!
Daiyu
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.
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 :
Regards,
Jenson
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
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
Can we override the below in custom CSS
svg.svg-container {
height=x% !important;
width=y% !important;
}
text.single-result
{
x=20.49 !important;
}
svg.svg-container
{
height: 75% !important;
width: 75% !important;
}
The above CSS addition did resolve my issue.
Thanks Jenson, this worked for me on v7.1
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