Search code examples
cssbootstrap-4modal-dialogangular7

The body content of this modal spills outside of the modal box, how can I make it so the text stays within the modal

In my angular 7 application, we are using bootstrap 4 for our styling. When this modal opens, the text inside of it spills outside of the box, how can I modify the css so that the content is responsive and stays within the modal?

I am debugging someone else's code, so it is difficult for me to figure out exactly how they've set this up.

Here is the modal element that they are using, it is actually set up as an aside element:

<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>

From some debugging, I believe this is the css class they are using that is causing the problem:

.modal-info-content {
  width: 55%;
  height: 35%;
  margin: 0px auto;
  position: fixed;
  top: 50px;
  right: 50px;
  bottom: 50px;
  left: 50px;
}

I'm assuming it has to do with position: fixed but am not sure how to change this so that it is responsive in mobile view.

Solution

  • I would start by removing the unnecessary code. This should eliminate the unexpected behavior.

    .d-flex and .justify-content are unnecessary at this point. If they're required, I would recommend applying them to a child element of the .modal-body, below your h4 header.

    Also, inside the .modal-body you can remove the div.row around the h4 and and remove the .col-12 class. These are both unnecessary because h4 tag already spans the entire row.

    Your .modal-body node would then look like:

    <div class="modal-body">
  <h4>
    To make any changes to your first name, middle initial or last name, please contact us.
  </h4>
  <div class="d-flex justify-content">
    ...
  </div>
</div>