Results 1 to 3 of 3

Thread: How to make scrollable modal if there is a form inside it?

  1. #1

    Thread Starter
    Fanatic Member
    Join Date
    Nov 2003
    Posts
    782

    How to make scrollable modal if there is a form inside it?

    Hi,

    I have a scrollable modal but it doesn't scrollable if I put a form inside it, how to make it scrollable?

    Code:
    <div class="modal fade" id="assignModal" data-coreui-backdrop="static" data-coreui-keyboard="false" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                        <div class="modal-content">
                            <form id="form-assignModal" method="post" autocomplete="off" novalidate="novalidate">
                                <div class="modal-header bg-warning">
                                    <h5 class="modal-title" id="staticBackdropLabel">Ticket assignment</h5>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label for="input-assignment_to">Assign to</label>
                                        <select class="form-control select2-single" id="assignment_to" name="assignment_to" data-placeholder="Select an user" required></select>
                                    </div>
                                    ...
                       </div>
                    </form>
                </div>
            </div>
        </div>

  2. #2
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,711

    Re: How to make scrollable modal if there is a form inside it?

    Based on your classes, it looks like you are using Bootstrap. Could you verify what version you're using as well as a minimal reproducible example?

    Here is an example using Bootstrap v5.2 that behaves as expected:
    HTML Code:
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
      Launch static backdrop modal
    </button>
    
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form>
              <div class="mb-3">
                <label for="input1" class="form-label">Input 1</label>
                <input type="text" class="form-control" id="input1">
              </div>
              <div class="mb-3">
                <label for="input2" class="form-label">Input 2</label>
                <input type="text" class="form-control" id="input2">
              </div>
              <div class="mb-3">
                <label for="input3" class="form-label">Input 3</label>
                <input type="text" class="form-control" id="input3">
              </div>
              <div class="mb-3">
                <label for="input4" class="form-label">Input 4</label>
                <input type="text" class="form-control" id="input4">
              </div>
              <div class="mb-3">
                <label for="input5" class="form-label">Input 5</label>
                <input type="text" class="form-control" id="input5">
              </div>
              <div class="mb-3">
                <label for="input6" class="form-label">Input 6</label>
                <input type="text" class="form-control" id="input6">
              </div>
              <div class="mb-3">
                <label for="input7" class="form-label">Input 7</label>
                <input type="text" class="form-control" id="input7">
              </div>
              <div class="mb-3">
                <label for="input8" class="form-label">Input 8</label>
                <input type="text" class="form-control" id="input8">
              </div>
              <div class="mb-3">
                <label for="input9" class="form-label">Input 9</label>
                <input type="text" class="form-control" id="input9">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Understood</button>
          </div>
        </div>
      </div>
    </div>
    Fiddle: https://jsfiddle.net/7xov965g/
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  3. #3
    New Member
    Join Date
    Nov 2022
    Posts
    1

    Re: How to make scrollable modal if there is a form inside it?

    Code:
     <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body"><form id="form-assignModal" method="post" autocomplete="off" novalidate="novalidate">
                 <div class="modal-header bg-warning">
                    <h5 class="modal-title" id="staticBackdropLabel">Ticket assignment</h5>
                 </div>
               <div class="modal-body">
                <div class="form-group">
                <label for="input-assignment_to">Assign to</label>
                 <select class="form-control select2-single" id="assignment_to" name="assignment_to" data-placeholder="Select an user" required=""></select>
           </div>
           ...
          </div>
         </form>
        </div>
       <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
    I used this code in some of my project three years ago and it worked fine

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width