-
May 10th, 2022, 11:32 PM
#1
Thread Starter
Fanatic Member
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>
-
May 13th, 2022, 03:48 PM
#2
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/
-
Nov 1st, 2022, 07:25 AM
#3
New Member
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|