I have a project in Angular 11 and I use Bootstrap(v5.1.3). I'm trying to click on a card (as if it were a blog post) to open a Bootstrap modal and show the content of the post. Here is de HTML 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">Autor: {{ post.id_user.username }}</p>
<p class="align-right card-text">Visitas: {{ 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>Autor: {{postContent.id_user.username}}</p>
</div>
</div>
</div>
</div>
According to the documentation of the latest version of Bootstrap (v5.1.3), the scroll should be removed in the while the modal is being displayed. The modal is displayed correctly like the cards, but when a modal is opened, it introduces a padding to the right of 17px and it doesn't block the scroll... Why it doesn't work?
I solved this issue deleting this line in my generic styles.css:
html {
overflow-x: hidden;
}
Maybe because this enter in conflict with some default style of bootstrap that makes this works.