Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hi Guys, I had a component for modal... My other modal is scrollable but this one is not... I tried to check each line but I can't configured out.
This are the codes.
<!-- The Modal -->
<div wire.ignore.self class="modal fade" id="loanApplicationModal" tabindex="-1" role="dialog" aria-labelledby="loanApplicationModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-xl" role="document">
<livewire:loan-application-form />
</div>
</div>
and the other component
<div>
<div div class="modal-content">
<form wire:submit.prevent="store" enctype="multipart/form-data">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Loan Processing</h4>
<a type="button" class="close" data-dismiss="modal">×</a>
</div>
<!-- Modal body -->
<div class=" modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="column" style="text-align:right">
<p>CIS No.:</p>
<p>Client Name:</p>
<p>Loan Cycle:</p>
</div>
<div class="column ml-2">
<p><b>00300</b></p>
<p><b>Juan Dela Cruz</b></p>
<p><b>001</b></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="row bg-info text-white">
<div class="column" style="text-align:right">
<p class="p-1 text-warning">Active Account</p>
<p class="p-1 text-warning">Details:</p>
</div>
<div class="column ml-2" style="text-align:right">
<p class="p-1">Loan Number:</p>
<p class="p-1">Granted Due Date:</p>
<p class="p-1">Amount Granted:</p>
<p class="p-1">Balance:</p>
</div>
<div class="column ml-2">
<p class="p-1"><b>0001</b></p>
<p class="p-1"><b>April 21, 2021</b></p>
<p class="p-1"><b>10,000.00</b></p>
<p class="p-1"><b>0.00</b></p>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12">
<div class="x_content">
<ul class="nav nav-tabs bar_tabs" id="loan_tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="loan-tab" data-toggle="tab" href="#loan_application" role="tab" aria-controls="loan_application" aria-selected="true">Loan Application Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="borrower-tab" data-toggle="tab" href="#borrower_ref" role="tab" aria-controls="borrower_ref" aria-selected="false">Borrowers References</a>
</li>
<li class="nav-item">
<a class="nav-link" id="other-tab" data-toggle="tab" href="#other_charges" role="tab" aria-controls="other_charges" aria-selected="false">Other Charges Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="loan_payroll-tab" data-toggle="tab" href="#loan_payroll" role="tab" aria-controls="loan_payroll" aria-selected="false">Loan Payroll Details</a>
</li>
<li class="nav-item">
<a class="nav-link" id="computation-tab" data-toggle="tab" href="#computation" role="tab" aria-controls="computation" aria-selected="false">Computation Details</a>
</li>
</ul>
<div class="tab-content" id="loanTabContent">
<div class="tab-pane fade show active" id="loan_application" role="tabpanel" aria-labelledby="loan-tab">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Type of Loan</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<br>
<div class="form-group">
<label>Amount Granted</label>
<input type="text" wire:model="province" name="province" class="form-control" required>
@if($errors->has('province'))
<p style="color:red">{{$errors->first('province')}}</p>
@endif
</div>
<div class="form-group">
<label>Date Granted</label>
<input type="date" wire:model="birth_date" name="birth_date" class="form-control" placeholder="mm/dd/yyyy" required>
@if($errors->has('birth_date'))
<p style="color:red">{{$errors->first('birth_date')}}</p>
@endif
</div>
<div class="form-group">
<label>Interest Rate Adjustment</label>
<input type="text" wire:model="province" name="province" class="form-control" required>
@if($errors->has('province'))
<p style="color:red">{{$errors->first('province')}}</p>
@endif
</div>
<br>
<div class="form-group">
<label>Loan Term</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Interest Payment Type</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Interval</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<br>
<div class="form-group">
<label>Account Officer</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Product</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Ledger</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
<div class="form-group">
<label>Loan Security</label>
<select name="gender_id" wire:model="gender_id"
class="form-control">
<option ></option>
</select>
@if($errors->has('gender_id'))
<p style="color:red">{{$errors->first('gender_id')}}</p>
@endif
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
<div class="tab-pane fade" id="borrower_ref" role="tabpanel" aria-labelledby="borrower-tab">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk aliquip
</div>
<div class="tab-pane fade" id="other_charges" role="tabpanel" aria-labelledby="other-tab">
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk
</div>
<div class="tab-pane fade" id="loan_payroll" role="tabpanel" aria-labelledby="loan_payroll-tab">
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk
</div>
<div class="tab-pane fade" id="computation" role="tabpanel" aria-labelledby="computation-tab">
xxFood truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
booth letterpress, commodo enim craft beer mlkshk
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Save</button>
</div>
</div>
</form>
</div>
</div>
In Bootstrap 4: You can create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.
https://getbootstrap.com/docs/4.6/components/modal/#scrolling-long-content
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Doesn't working
@anonymouse703 What part exactly do you want to be scrollable? The content of the tabs or the modal body in general? Either way you could simply set a max-height for your div and work with overflow-y: auto.
For example:
<div class=" modal-body" style="max-height: 400px; overflow-y: auto;">
...
</div>
I have a long form... but the modal body is not scrollable... I already applied your suggestion but still I cannot click the arrow down... or scroll down
Please or to participate in this conversation.