Recently in my Angular 7 application, we integrated Bootstrap 4 for styling. However, we encountered an issue where the text inside a modal spills out of the box. How can we modify the CSS to ensure that the content remains responsive and contained within the modal?
Since I'm currently debugging someone else's code, it's proving to be quite challenging to understand the exact setup they have used for this.
Here's the modal element they've implemented, interestingly as an aside:
<aside class="modal fade model-demographic" tabindex="-1" id="name-information" role="dialog" aria-labelledby="System Warning" aria-hidden="true">
<div class="demographic-name-dob modal-dialog modal-dialog-centered modal-lg blue" role="document">
<div class="modal-content modal-info-content">
<div class="modal-header model-info-header">
<h5 class="modal-title"><b>Name</b></h5>
</div>
<div class="modal-body d-flex justify-content">
<div class="row">
<h4 class="col-12">To make any changes to your first name, middle initial or last name, please contact us.</h4>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-modal" aria-label="cancel">Close</button>
</div>
</div>
</div>
</aside>
Upon some debugging, it seems that the following CSS class is likely the cause of the issue:
.modal-info-content {
width: 55%;
height: 35%;
margin: 0px auto;
position: fixed;
top: 50px;
right: 50px;
bottom: 50px;
left: 50px;
}
I suspect that the 'position: fixed' property is causing problems, but I'm uncertain how to adjust it to ensure responsiveness in mobile view.