Bootstrap modal, scrollable does not work

I have a boostrap 4.5 modal with some content, by default if the content is too big for the window, a scrollbar should appear.

I have also try to add 'modal-dialog-scrollable' but I don't see any scrollbar and some parts of the dialog are not accessible !

If someone has an idea of the problem ?

Here is a small extract of the generated code: https://codepen.io/cdemez/pen/BajrJzW

..

Solution

You'll need to follow the hierarchy as bootstrap.

Your code was modal-dialog > modal-content > form > modal-body.

I changed it to modal-dialog > modal-content > modal-body > form.

modal-body should be direct child of modal-content, rest is fine

PS I had to remove map code because of the max char validation of SO

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div id="modal_639f8823-84ba-442d-8aac-c64276ce126e" class="modal fade show" data-backdrop="static" style="z-index: 1040; display: block;" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable " role="document">
    <div class="modal-content" style="">
      <div class="modal-header">
        <h5 class="modal-title">Create your first store</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
      <div class="modal-body">
        <form id="myform">
          <div>
            <div class="mb-2">
              <div class="input-group"> <input placeholder="Store's name" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="form-group mb-2 row">
              <div class="input-group col-sm-12">
                <div class="blazored-typeahead valid">
                  <div class="blazored-typeahead__controls"><input placeholder="Address" autocomplete="off" type="text" class="blazored-typeahead__input" _bl_6ddea9fa-d464-44f6-9aa9-9f0b16dbba43=""></div>
                </div>
              </div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-phone"></i></span></div> <input placeholder="Phone" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-envelope"></i></span></div> <input type="text" placeholder="email" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-globe-americas"></i></span></div> <input type="text" placeholder="Web site" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-facebook-f"></i></span></div> <input type="text" placeholder="Facebook page" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2 row"> <span class="input-group col-5"> <input step="any" placeholder="Longitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid"> </span> <span class="input-group col-5" style="padding-left:0px"> <input step="any" placeholder="Latitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid"> </span>              <span class="input-group col-2" style="padding-left:0px"> <button type="button" class="btn btn-primary"> <i class="fas fa-map-marker-alt"></i></button> </span></div>
            <div style="height:300px"></div>
          </div>
        </form>

      </div>
      <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary" form="myform">Create a PRO account</button>

      </div>
    </div>
  </div>
</div>

Update, as submit button is out of the form, the form is not submitting.

Solution: Using form attribute with the value form ID on submit button can submit the form.

<button type="submit" class="btn btn-primary" form="myform">Create a PRO account</button>