Topic: Select Form field, doesn't work if searchable inside modal
Mejuto free asked 2 years ago
When I create a searchable Select field inside Modal the search field doesn't work.
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-mdb-toggle="modal"
data-mdb-target="#staticBackdrop"
>
Launch static backdrop modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="staticBackdrop"
data-mdb-backdrop="static"
data-mdb-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<select class="select" data-mdb-filter="true" name="Field" id="Field">
<option value="Value1">Value1</option>
<option value="Value2">Value2</option>
<option value="Value3">Value3</option>
<option value="Value4">Value4</option>
<option value="Value5">Value5</option>
<option value="Value6">Value6</option>
</select>
<label class="form-label select-label">Field</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Add comment
Dawid Wajszczuk staff answered 2 years ago
Hi,
You need to use data-mdb-container="#staticBackdrop"
on the select element and it will work fine. Here is the snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3546491.
Keep coding,
Dawid
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.8.1
- Device: Web
- Browser: Chrome
- OS: Mac
- Provided sample code: No
- Provided link: No