nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popup in a webmap within a dashboard won't align left

JayJohnsonWashoeCounty

I have a webmap in which I've formatted the HTML pop-up as two tables. In the webmap the pop-up looks fine and everything aligns left. EVERYTHING in this pop-up is formatted as a table - even the top half that doesn't show cell boundaries.

When I use this map within Dashboard, the very same pop-up behaves as right-aligned:

My pop-up HTML is attached. I've shoved a bunch of left-align statements everywhere to try to force the behavior - to no avail.

Any thoughts on what is happening here?

Jay

COVIDTestingLocationsPopupHTML.txt.zip

Interactively Adjust Grid.gif

Find more posts tagged with

Accepted answers

All comments

Spike73

Hi Lisa,

Thanks for your reply.

I thought "Dashboard questions" board was the right place to post. Where exactly do you suggest I post this question?

Thanks

Spike

Anonymous User

Interesting. I would recommend posting a question on the Dashboards Community directly so that a dev from the team can take a look. They're the experts!

Spike73

Hi @LisaBerry , Hi @JayJohnsonWashoeCounty

Do you have news about this issue? I'm experiencing the same behaviour.

I've also a popup set with text-align: left, works fine in the webmap but looks aligned right in the dashboard.

When inspecting the pop-up in the dashboard (chrome devtools (f12)), I see a text-align: right

Let me know if you have an update on this.

Thanks,

Marcello

LisaBerry

Hi Jay,

Glad you found a workaround for now! I sent this over to the Dashboards team and they think there could be some mismatching of CSS and HTML being done in the dashboard that could have caused your problem. They are looking into it further.

-Lisa

JayJohnsonWashoeCounty

I've removed the top part of the pop-up from the table and my left alignment has returned. So I'm okay for my customer, but I really want to understand why that table went into a bad alignment situation, since putting everything in the table gives me a little more control over the popup.

-------------------------------------------

BAD right-alignment popup dashboard:
https://washoe.maps.arcgis.com/apps/opsdashboard/index.html#/7d3b6cd258f74eeab8a96d7a0faf55c2

webmap supporting this with left-alignment HTML table:
https://washoe.maps.arcgis.com/home/webmap/viewer.html?webmap=066bbdeea56e4d90b3c8a0f29a7f6193

----------------------------------------------

Good alignment dashboard (not using table for top part of popup):

Good alignment dashboard

webmap supporting this:

https://www.arcgis.com/home/webmap/viewer.html?webmap=d37055198924487297cbfd6a13d5e78b

------------------------

Thanks

Jay

LisaBerry

Hi Jay. Can you share the web map URL? I can share it with the ArcGIS Online team and ask for their insight.

JayJohnsonWashoeCounty

I also have put everything into a single table, in case that was a problem.

Lisa Berry‌

POPup HTML (everything in one table)

<table border="1" cellpadding="1" cellspacing="1" style="text-align: left; width: 150px;">
<tbody>
<tr style="background-color: #0076a9">
<td align="left" colspan="2"><font color="#d3d3d3">.....TESTING_LOCATION_INFO.....</font></td>
</tr>
<tr style="background-color: #0076a9">
<td align="left" colspan="2"><font color="#d3d3d3">{NAME}</font></td>
</tr>
<tr style="background-color: #0076a9">
<td align="left" colspan="2"><font color="#d3d3d3">{ADDRESS}</font></td>
</tr>
<tr>
<td align="left" colspan="2">{PHONE}<br /></td>
</tr>
<tr>
<td align="left" colspan="2"><font color="#ff0000">{REQUIREMENTS}</font><br /></td>
</tr>
<tr>
<td align="left" colspan="2"><a href="{LINK}" rel="nofollow ugc" target="_blank">Specific location website</a><br /></td>
</tr>
<tr>
<td align="center" colspan="2">{DAYS_1} {HOURS_1}<br /></td>
</tr>
<tr>
<td align="center" colspan="2">{DAYS_2} {HOURS_2}<br /></td>
</tr>
<tr>
<td align="left" width="80%">Screening Required?</td>
<td align="left" width="20%">{SCREENING_REQUIRED}</td>
</tr>
<tr>
<td align="left" width="80%">Appt. Required?</td>
<td align="left" width="20%">{APPT_REQUIRED}</td>
</tr>
<tr>
<td align="left" width="80%">Doctor's Order Req?</td>
<td align="left" width="20%">{ORDER_REQUIRED}</td>
</tr>
<tr>
<td align="left" width="80%">Drive-thru?</td>
<td align="left" width="20%">{DRIVE_THRU}</td>
</tr>
</tbody>
</table>

tomESRI_0-1781001648635.png

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.