I have added a Bootstrap Wizard inside the modal, and I need to initialize the Wizard only when this actually exists on the DOM 'cause I have to calculate the width, when the modal is closed if I execute:
$('.card-wizard').width()
I get: 0, when the modal is opened if I execute the same command above I get 465. The problem is that I have to calculate the width after that the modal is opened otherwise the width() method will return 0.
What I tried so far is:
$('a[href="#account"]').on('shown.bs.tab', function(){
$('.card-wizard').bootstrapWizard({
onInit: function(tab, navigation, index){
let width = $('.card-wizard').width();
}
});
});
the tab is defined in that way:
<div class="wizard-navigation">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#account" data-toggle="tab" role="tab">
Account
</a>
</li>
and the wizard is contained inside the member-modal which is opened using $('#member-modal').modal('show');
is there a way to initialize the BootStrap Wizard after the modal show?
The width is 0 because your element is inside the modal that is hidden.
You can workaround using .show( complete ).
The snippet:
$('#exampleModal').show('show', function() {
var x = $('.wizard').width();
$('#exampleModal').hide();
console.log('width: ' + x);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://www.bootstrapwizard.com/demo/bootstrap-wizard.css">
<script src="http://www.bootstrapwizard.com/demo/bootstrap-wizard.min.js"></script>
<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" 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 wizard">
<ul class="nav nav-wizard">
<li>
<a href="#step1">Step 1</a>
</li>
<li>
<a href="#step2">Step 2</a>
</li>
<li>
<a href="">Step 3</a>
<ul class="nav nav-wizard">
<li>
<a href="#step3a">Step 3A</a>
</li>
<li>
<a href="#step3b">Step 3B</a>
</li>
<li>
<a href="#step3c">Step 3C</a>
</li>
</ul>
</li>
<li>
<a href="#step4">Step 4</a>
<ul class="nav nav-wizard">
<li>
<a href="#step4a">Step 4A</a>
</li>
<li>
<a href="#step4b">Step 4B</a>
</li>
<li>
<a href="#step4c">Step 4C</a>
</li>
</ul>
</li>
<li>
<a href="#step5">Step 5</a>
</li>
</ul>
<div class="wizard-pane" id="step1">
<h3>Step 1</h3>
</div>
<div class="wizard-pane" id="step2">
<h3>Step 2</h3>
</div>
<div class="wizard-pane" id="step3a">
<h3>Step 3A</h3>
<p>Step 3 href is empty, so the first child is selected</p>
</div>
<div class="wizard-pane" id="step3b">
<h3>Step 3B</h3>
</div>
<div class="wizard-pane" id="step3c">
<h3>Step 3C</h3>
</div>
<div class="wizard-pane" id="step4">
<h3>Step 4</h3>
</div>
<div class="wizard-pane" id="step4a">
<h3>Step 4A</h3>
</div>
<div class="wizard-pane" id="step4b">
<h3>Step 4B</h3>
</div>
<div class="wizard-pane" id="step4c">
<h3>Step 4C</h3>
</div>
<div class="wizard-pane" id="step5">
<h3>Step 5</h3>
</div>
</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>