Layout Bug? Map next to Chart not laid out the same.

[NFlourish]

I am laying out a new Hub site. I put a 500px high map next to a 500px high chart in the same row. The margins for the map and chart make them not show on page lined up with each other. See screen capture.

Why is the map higher in the row compared to the charts? Why does the chart have a right margin and the map does not? I have not customized the theme or CSS for the Hub site at all.

[KlaraSchmitt]

Hi @NFlourish,

I'm sorry that you are experiencing issues. Do you have a public url that you could share? I am unable to reproduce this issue on my own site and the two cards (map card, chart card) really should be at the same baseline height, especially since you have the titles off on both. This seems like a bug, but it'd help if I could inspect your site.

[NFlourish]

Here is the current Hub... thanks!

https://cwd-smp-cambridgegis.hub.arcgis.com/

[KlaraSchmitt]

Would you be able to temporarily make the site public so I can take a look?

[NFlourish]

Oh - sorry - I thought had Esri had the ability to just ignore the sharing settings. Should be viewable. Had to change the map for privacy reasons.

[KlaraSchmitt]

Thanks! I didn't realize you were using the "wide" layout in your row. Now I can reproduce on my own site. You can change your site back to the settings you had before. I'll take a look at the issue and get back to you.

[KlaraSchmitt]

@NFlourish,

While I know we applied margins on some elements - like the Text Card - so that they wouldn't be flush up against the edges of the row in wide layouts, I honestly do not recall the reasoning for the chart card. I can bring it up to the team as something we may want to change, but since it would likely affect a lot of other sites, it's hard to know the repercussions of doing that.

However, I can give you a code snippet that will fix it for your site. If you add a class to the row, which can be found in the Appearance section of row settings:

Then in a Text Card somewhere on the page, if you select the </> Edit in HTML button, you can add an embedded style that can target the row. In the Text Card HTML editor, you want to add:

.no-margins-chart .wideRowClass .chart-card {
margin: 0px;
}

You do want to be careful to always wrap any system level classes (.wideRowClass .chart-card) in something unique because otherwise our CSS might collide with your styling. But with a unique row class wrapped around the system classes, you should be fine.

Hope that helps!