Select to view content in your preferred language

Vertical Alignment List Widget

299
3
04-24-2025 10:36 AM
Labels (1)
BJR
by
New Contributor

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. 

Screenshot 2025-04-24 at 1.34.04 PM.png

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>

 

0 Kudos
3 Replies
RPGIS
by MVP Regular Contributor
MVP Regular Contributor

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.

<table border="{expression/tborder}" cellpadding="0" cellspacing="0" style="height:80vh">

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.

0 Kudos
Julia_Levermann
New Contributor

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

Julia_Levermann_0-1747176473802.png

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

 

0 Kudos
BJR
by
New Contributor

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

BJR_0-1748298034658.png

 

0 Kudos