I'm currently working on a project in Angular 11 using Bootstrap (v5.1.3). My main goal is to create a functionality where clicking on a card, similar to a blog post, will trigger a Bootstrap modal popup displaying the content of that specific post. Below is the HTML structure of my Angular component:
<div class="container">
<!--Card-->
<div class="card" style="width: 18rem" *ngFor="let post of posts">
<a class="cardLink" data-bs-toggle="modal" data-bs-target="#postsModal" (click)="onLoadModal(post.idPost)">
<img class="card-img-top" src="../../assets/buckupimg.webp" alt="Card image cap" loading="lazy" />
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<div>
<p class="align-left card-text">Author: {{ post.id_user.username }}</p>
<p class="align-right card-text">Views: {{ post.views }}</p>
</div>
</div>
</a>
</div>
</div>
<!--Modal-->
<div class="modal fade" id="postsModal" tabindex="-1" aria-labelledby="postsModal" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="postsModalTitle">{{postContent.title}}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img src="../../assets/buckupimg.webp" alt="Card image cap">
<p>{{postContent.content}}</p>
</div>
<div class="modal-footer">
<p>Views: {{postContent.views}}</p>
<p>Author: {{postContent.id_user.username}}</p>
</div>
</div>
</div>
</div>
After referring to the Bootstrap documentation (v5.1.3), I encountered an issue where even though the modal appears correctly along with the cards, it introduces a 17px padding to the right when opened and does not disable scrolling as expected. Can anyone provide insight into why this behavior is occurring?