MapThat – HTML Bubble Wrap - Results

By David Crowther

Question:

In MapThat, how can you wrap the Information Bubble so that the results values don’t stretch across the screen?

Answer:

In this previous FAQ, we detail how you can use HTML to wrap the FIELD Names in your MapThat Information Bubbles.

https://www.cadlinecommunity.co.uk/hc/en-us/articles/360018692357-MapThat-HTML-Bubble-Wrap

In the example below, the Field Names on the left are wrapped so that they don’t stretch, but the results values are not wrapped, which means the bubbles can stretch to be too wide!

By using this example Bubble HTML below, you can now wrap both the Field Names and the Result Values:

<div id="BubblePanel" style="width:350px;"><a href="javascript:InfoBox_Close(%PIN_ID%)" style="display:%display_close_button%;"><i class="fa fa-times-circle BubbleClose"></i></a><br/>

<table rules="cols" style="border: 2px solid white;margin: 5px;width:97%;"> 

<tbody>

<tr style="border-bottom-color: white; border-bottom-width: 2px; border-bottom-style: solid;">

<td align="center" colspan="2"><b>Liverpool Planning Apps</b></td>

</tr>

<tr>

<td style="padding-right: 10px; padding-left: 12px;"><strong>App Number:</td>

<td style="border-left-color: white; border-left-width: 2px; border-left-style: solid;padding-right: 10px; padding-left: 10px;"><strong>%appnum%</strong></td>

</tr>

<tr> <td style="padding-right: 10px; padding-left: 12px;"><strong>Proposal Details:</td>

<td style="border-left-color: white; border-left-width: 2px; border-left-style: solid;padding-right: 10px; padding-left: 10px;"><strong>%proposal%</strong>

</td>

</tr>

</tbody></table>

</div>

The text highlighted in yellow is the extra HTML text that you will need to add to existing HTML Bubbles to set a width for your Bubble and thus wrap the result values.

Once applied to the same layer, we can see the bubble is now shorter and the results values are now wrapped inside the box.

Changing the width value (in pixels) to a higher number, will make the bubble stretch wider, but still ensure the result values wrap to fit in the newly sized bubble window.

Changing the width (%) on the table rules line will control how much the HTML Table stretches across the whole of the Bubble window. For example, changing this to a width % of 75%....

….will mean that the Results Table stretches 75% across the width of the Bubble window, thus leaving a clear gap for the close button.

Using this HTML tip, you can now control the width and size of Result Tables in your MapThat Information Bubbles.