topic Re: Vertical Alignment List Widget in ArcGIS Dashboards Questions

Vertical Alignment List Widget

BJR — Thu, 24 Apr 2025 17:38:45 GMT

Has anyone built an ArcGIS Dashboard that vertically aligns a List Widget within the box? I have tried all sorts of HTML in the Advanced formatting, I have tried the JSON in the Assistant and I have not found any technique that achieves dynamic centering across multiple screen sizes.

Here is my existing Source code

<p style="text-align:center;"> <strong>Average Dwell Time</strong> </p> <h2 style="margin:0;text-align:center;"> <span style="color:hsl(238,72%,63%);font-size:24px;"><strong>{field/avg_dwell_time}</strong></span> </h2>

Re: Vertical Alignment List Widget

RPGIS — Fri, 25 Apr 2025 13:01:42 GMT

Hi @BJR,

One thing you can try is creating a table within a table and setting the alignment values via html on the inset table. I have used that method to center a table based on cell height.

vh uses viewport, aka screensize, when setting the height of a table so be careful when using that but it will allow for values to center based on height. I too have this issue and I am trying to find a work around but this is what I am testing currently.

Re: Vertical Alignment List Widget

Julia_Levermann — Tue, 13 May 2025 22:48:50 GMT

Try using flexbox to vertically align your text within the list element:

This blog post gives a good overview of flexbox and grid CSS: https://www.esri.com/arcgis-blog/products/arcgis-online/mapping/spruce-up-your-pop-ups-with-css

Re: Vertical Alignment List Widget

BJR — Mon, 26 May 2025 22:21:22 GMT

Unfortunately this doesn't work - across screen sizes the list widget still maintains center within the box and not the widget itself. Im no css pro but it seems like the css of the dashboard itself overrides the widget forced-css