Scroll and nesting issues when rendering multiple reports with Leaflet on a single HTML page
I'm generating a combined report in Django by looping through several database entries and rendering the same HTML template multiple times, each with different data. The template includes Leaflet maps and some inline scripts.
The problem is: when I combine the reports into a single page, the layout breaks — it looks like the reports are either nested inside each other or overlapping. I also see multiple scrollbars (one inside another), which shouldn't happen. This only occurs when I render several reports together.
Each individual report works fine on its own. The issue only appears when I generate them together in a loop.
Any help or direction would be appreciated.
Could you maybe add a screenshot of how it looks when it's broken? That would help a lot. Also:
how does your HTML look for one report?
are the map containers using the same id, like id="map" for all of them?
and how are you initializing the Leaflet maps in JS?
It might be that the maps are clashing because of duplicate IDs or styles.