# Other Languages > XML, HTML, Javascript, Web and CSS >  How to make scrollable modal if there is a form inside it?

## Winanjaya

Hi,

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



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

----------


## dday9

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:


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

----------


## conniegeiger34

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

----------

