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

Question

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 · Answer

@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!

KlaraSchmitt · Answer

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.

NFlourish · Answer

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.