Dashboards & Visualizations

How to align single value text to left in Dashboard Classic?

LearningGuy
Builder

Hello,
How to align single value text to left in Dashboard Classic?
I tried to use text-align and float, but it didn't work. Please suggest
Thank you 

LearningGuy_0-1707368232388.png

<panel id="DisplayPanel">
<single id="datestyle">
<search>
  <query>| makeresults
      | addinfo
     | eval text = "How to align this text to left?"
     | table text
   </query>
</search>
</single>
</panel>

<panel depends="$alwaysHideCSS$">
<title>Single value</title>
<html>
<style>
#DisplayPanel {
width: 100% !important;
font-size: 16px !important;
text-align: left !important;
float: left;
}
</style>
</html>
</panel>

Labels (1)
0 Karma

LearningGuy
Builder

Hello,
In the production, i had the opening bracket {  in place, but I missed putting the opening bracket in this post.
The width is 100%
So, by changing width and put the { didn't align the text to the left.
Did you get it to work on  your end?
Thanks

0 Karma

SanjayReddy
SplunkTrust
SplunkTrust

Hi @LearningGuy 

folllwing XML worked for me

<dashboard version="1.1" theme="light">
<label>Test</label>
<row>
<panel id="DisplayPanel">
<single id="datestyle">
<search>
<query>| makeresults
| addinfo
| eval text = "How to align this text to left?"
| table text
</query>
</search>
<option name="rangeColors">["0x53a051","0x0877a6","0xf8be34","0xf1813f","0xdc4e41"]</option>
</single>
</panel>
<panel depends="$alwaysHideCSS$">
<title>Single value</title>
<html>
<style>
#DisplayPanel
{
width: 40% !important;
font-size: 16px !important;
text-align: left !important;
float: left;
}
</style>
</html>
</panel>
</row>
</dashboard>



SanjayReddy_0-1707754828952.png

 

LearningGuy
Builder


Hello,
Your code moved the panel to the left when you set it to 40%, but not the text. I showed grey area on the right side.  Tried to use 100%. It turns out the text-align: left  didn't do anything     Thanks
I would like to align the text like the following:    

LearningGuy_0-1707858235772.png

 

0 Karma

SanjayReddy
SplunkTrust
SplunkTrust

Hi @LearningGuy 

In html code open bracket is missing highlited in RED and width value set accrodingly to keep left

<html>
<style>
#DisplayPanel
{
width: 40% !important;
font-size: 16px !important;
text-align: left !important;
float: left;
}
</style>
</html>

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

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...