HTML Legend

Ask the Community Get Answers
1

Hi All,

trying to create a colour coded HTML legend for the description of calendars / maps. I can do it by making an HTML table but it looks pretty crude (and as of today inserts a big fat gap before it which is even more annoying!). I used to do it with just text and coloured windows circle emojis but I ran out of emoji colours…

image
image925×812 159 KB

Here’s the HTML I used:

<table>
<tbody>
<tr style="height:13px">
<td style="height:13px;width:70px;text-align:center"><strong>Jamie</strong></td>
<td style="height:13px;width:70px;text-align:center"><strong>Jack</strong></td>
<td style="height:13px;width:70px;text-align:center"><strong>Dave L</strong></td>
<td style="height:13px;width:70px;text-align:center"><strong>Mark</strong></td>
<td style="height:13px;width:70px;text-align:center"><strong>Paul</strong></td>
<td style="height:13px;width:70px;text-align:center"><strong>Elise</strong></td>
<td style="height:13px;width:70px;text-align:center"><strong>Dave K</strong></td></tr>
<tr style="height:13px">
<td style="background-color:#1970b8;height:13px;width:70px"> </td>
<td style="background-color:#14c016;height:13px;width:70px"> </td>
<td style="background-color:#886ce4;height:13px;width:70px"> </td>
<td style="background-color:#8e562e;height:13px;width:70px"> </td>
<td style="background-color:#ffba00;height:13px;width:70px"> </td>
<td style="background-color:#00ffff;height:13px;width:70px"> </td>
<td style="background-color:#1ab7ea;height:13px;width:70px"> </td>
</tr>
</tbody>
</table>

Any wizardy greatly appreciated! Thanks, Hugo

2

Hugo I assume you embedded that in a rich text item as another view at the top of your “map” ? You could tidy the html a bit and have single line to set text background font size etc etc rather than using 2 sets.

But another thought i tried was to create a graphic of the keys and embdedde them as a rich text item to the left of the main app view. This becomes a set view on the left rather than scrolling so it is always visible. Your could play with the graphic so that there is a transparent section at the top to move it down to a more correct position.

image
image894×285 67.4 KB

It’s far from ideal BUT eliminates that annoying huge gap between views (I have to contend with that a lot in my military personnel database.

Hope this might give you some ideas.

Cheers

Ray

3

Hgo

Just as another thought, you could also do a horizontal keys graphic like this

image

and embedded it in the view description field

<center><img src="https://yourserver.com.au/graphics/keys2.png" /></center>

Result eliminates the big gap

image
image1242×310 111 KB

Cheers

Ray

4

Ray just made my day!

Thanks Ray, that’s awesome. Not sure why I didn’t think of creating it as a separate image though as an alternative to the HTML. I’ll have a play today.

Hugo

2 Likes