Dashboards & Visualizations

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

LearningGuy
Motivator

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
Motivator

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
Motivator


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!

AppDynamics Summer Webinars

This summer, our mighty AppDynamics team is cooking up some delicious content on YouTube Live to satiate your ...

SOCin’ it to you at Splunk University

Splunk University is expanding its instructor-led learning portfolio with dedicated Security tracks at .conf25 ...

Credit Card Data Protection & PCI Compliance with Splunk Edge Processor

Organizations handling credit card transactions know that PCI DSS compliance is both critical and complex. The ...