In my current project using Angular 10, I have integrated Mapbox to display path routes. Following the standard Angular practice of splitting components, I separated the map rendering component and called it into the main map component. However, I encountered an issue with white borders or frames appearing at the top and bottom inside any container where I placed the map.
new-map.component.ts
<details>
<summary class="bg-light text-dark">
<nav class="navbar navbar-light
bg-light fs-3 justify-content-end"
(click)="changeMapArrow()">
<span class="material-icons">
<b>{{arrowClass}}</b>
</span>
</nav>
</summary>
<app-mini-map></app-mini-map>
</details>
mini-map.component.ts
<div class="row d-flex flex-column">
<div class="col-12">
<div class="row">
<div class="col-6 ml-0">
<b>Needs to know:</b>
<span class="text-primary ml-3">
<b>4
<span class="material-icons check-icon-position mr-1">
check_circle_outline
</span>
</b>
</span>
|
<span class="text-danger ml-2">
<b>2 ETA Delay</b>
</span>
</div>
<div class="col-6 d-flex flex-row justify-content-end align-items-start">
<p class="text-muted">Style map:</p>
<input type="radio" class="btn-check ml-3" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-light ml-3 btn-style-position text-muted"
for="option1" (click)="setMapStyle('gray', 'to_gray')">
<b>Gray</b>
</label>
<input type="radio" class="btn-check ml-3" name="options" id="option2" autocomplete="off">
<label class="btn btn-light ml-3 btn-style-position text-muted"
for="option2" (click)="setMapStyle('dark', 'to_dark')">
<b>Dark</b>
</label>
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-light ml-3 btn-style-position text-muted"
for="option4" (click)="setMapStyle('color', 'to_color')">
<b>Color</b>
</label>
</div>
</div>
</div>
<div id="map-container" class="col-12">
<div #miniMapa class="border-rnd-map mini-mapa-test"></div>
<ul class="list-group" [style.display]="!cardinalPointsMenu ? 'none' : 'block'" >
<ng-container *ngFor="let point of pointsToFitBound">
<li class="list-group-item"
(click)="moveToFitArea(point.fitPoint)"
*ngIf="point.ableToShow">
{{point.cardinalPoint}}
</li>
</ng-container>
</ul>
</div>
</div>
styles applied over the mini-map.component.sass
#map-container
width: 100%
height: 200px
margin: 0 auto
.mini-mapa-test
width: 100%
height: 500px
margin: 0 auto
https://i.stack.imgur.com/hGcEe.png https://i.stack.imgur.com/JxvL2.png
I have experimented with various HTML element containers other than a div, but the same error persists. Interestingly, the errors do not occur when I use a single div in the parent component, which is the only configuration that works properly.