Fixing the formatting on the labels in ArcGIS Dashboard
Hi,
We are trying to build an ArcGIS Dashboard, yet having struggle with formatting the label. So far our On-Target and Off-Target look like below. As you can see, the on-target and off-target boxes are not centered, so do the "Off-Target" and "On-Target" texts and the tick and circle label:
Eventually, we want to have the final output for On-Target/Off-Target labels look as follow in the ArcGIS Dashboard by Hawaii (https://alohachallenge.hawaii.gov/#HawaiiVLR):
We are using the following HTML code to make the On-Target and Off-Target label in our Dashboard, not sure something wrong going on with the code:
<figure class="table" style="width:100%;">
<table style="background-color:#35ac46;color:#ffffff;font-size:16px;padding:0px;">
<thead>
<tr>
<th width="40">
<p>
</p>
<svg style="display:block;margin-left:auto;margin-right:auto;vertical-align:middle;" fill="#ffffff" height="18" id="ember25808" viewBox="0 0 16 16" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M7.5 0C3.366 0 0 3.364 0 7.5S3.365 15 7.5 15c4.136 0 7.5-3.364 7.5-7.5S11.636 0 7.5 0zm.001 14C3.916 14 1 11.084 1 7.5S3.916 1 7.501 1C11.085 1 14 3.916 14 7.5S11.085 14 7.501 14z"></path><path d="M11.634 4.633L6.5 9.767 4.312 7.579l-.707.707L6.5 11.18l5.841-5.84z"></path></svg>
</th>
<th style="text-align:center;">
<p style="text-align:center;">
On-Target
</p>
</th>
</tr>
</thead>
</table>
</figure>
You can use the browser Dev Tools to find the Aloha Dashboard HTML:
<div style="align-items:center; background-color:#87c99c; display:flex; margin-bottom:1.5%; margin-left:1.5%; margin-right:1.5%; margin-top:1.5%; padding:4%; vertical-align:middle"><svg height="15.72" viewBox="0 0 19.16 15.72" width="19.16" xmlns="http://www.w3.org/2000/svg"> <path d="M17.84,3.458,6.863,14.418a1.222,1.222,0,0,1-.94.3,1.282,1.282,0,0,1-.869-.3L.319,9.682a1.113,1.113,0,0,1,0-1.561L1.9,6.543a1.062,1.062,0,0,1,.78-.319,1.062,1.062,0,0,1,.78.319l2.5,2.5L14.7.319a1.113,1.113,0,0,1,1.561,0L17.84,1.88a1.134,1.134,0,0,1,0,1.578Z" fill="#00675c" id="checkmark" stroke="rgba(0,0,0,0)" stroke-width="1" transform="translate(0.5 0.5)"></path> </svg>
<h3 style="font-size:1rem; margin-left:2%; padding:2%; text-align:left"><strong>On track</strong></h3>
</div>Then tweak it to reflect your desired changes:
<div style="align-items:center; background-color:#35ac46; color:#ffffff; display:flex; margin-bottom:1.5%; margin-left:1.5%; margin-right:1.5%; margin-top:1.5%; padding:4%; vertical-align:middle"><svg fill="#ffffff" height="15.72" viewBox="0 0 19.16 15.72" width="19.16" xmlns="http://www.w3.org/2000/svg"> <path d="M7.5 0C3.366 0 0 3.364 0 7.5S3.365 15 7.5 15c4.136 0 7.5-3.364 7.5-7.5S11.636 0 7.5 0zm.001 14C3.916 14 1 11.084 1 7.5S3.916 1 7.501 1C11.085 1 14 3.916 14 7.5S11.085 14 7.501 14z"></path><path d="M11.634 4.633L6.5 9.767 4.312 7.579l-.707.707L6.5 11.18l5.841-5.84z"></path> </svg>
<p style="font-size:16px; margin-left:2%; padding:2%; text-align:left"><strong>On-Target</strong></p>
</div>
Hi Jennifer,
Thanks a lot for helping! It is really useful.
There is another issue that we have not figured out. The font size of our main texts (the numbers such as 2.8 or 37.9) as well as the middle text below the main texts are not consistent across indicators. I already set the same font sizes for them across indicators, but Idk why it still look inconsistent eventually.
Hawaii dashboard, however, manage to have the same font size across indicators
It's important to understand how the 'font size' works in Dashboards. You are not selecting the exact size the font will be, but the largest size it can be. This is to ensure that your indicator text doesn't get cut off at different screen sizes. If you set your size to Large, indicators with smaller text can probably be that large size, but indicators with a lot of text can probably only be small or medium before text is cut off. That is why the sizes look different.
The best way to ensure your indicators font sizes are as consistent as possible, is to select the largest size that works for all of your data. So for my example above, the '888,888,888,888 can probably only work at a medium font size. So, I would limit all my indicators to have a max size of medium.
