R
Decision:1. We'll take the fashion window processor that works after the fashion window is opened and add the following code:Result:$('.modal').on('shown.bs.modal', function(event) {
var maxHeight = 0;
$('.tab-pane').each(function() {
maxHeight = Math.max(maxHeight, $(this).height("").height());
}).height(maxHeight);
})<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- begin Tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
</div>
</div>
<!-- end Tabs -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>This code operates after the opening of the modular window, finds the maximum tent of one of the tabs, then puts the other high.
Now our fashion window is stationary when the deposits are switched.2. Add's a window reset processor to keep the size of the cell blocks with content adjusted for the window.Result:$('.modal').on('shown.bs.modal', function(event) {
var maxHeight = 0;
$('.tab-pane').each(function() {
maxHeight = Math.max(maxHeight, $(this).height("").height());
}).height(maxHeight);
})
/* begin Window Resize */
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function resizeThrottler() {
if (!resizeTimeout) {
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
actualResizeHandler();
}, 66);
}
}
function actualResizeHandler() {
/* begin Modal Tabs */
var maxHeight = 0;
$('.tab-pane').each(function() {
maxHeight = Math.max(maxHeight, $(this).height("").height());
}).height(maxHeight);
/* end Modal Tabs */
}
/* end Window Resize */<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- begin Tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos nobis laborum id modi cupiditate. Voluptas necessitatibus numquam pariatur assumenda aut aspernatur reprehenderit ab possimus laudantium laboriosam, repellat porro id illo.</p>
</div>
</div>
<!-- end Tabs -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Tada! Ready.