The button resizes whenever I toggle to a spinner and then toggle back to the button. I cannot figure out why.
function update() {
var btn = document.getElementById('submitBtn');
btn.innerHTML =
'<span class="spinner-border spinner-border-sm"></span>';
setTimeout(toDefault, 5000);
}
function toDefault() {
const btn = document.getElementById('submitBtn');
btn.innerHTML =
'<span class="btn btn-primary">Submit</span>';
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="navbar-nav">
<button id='submitBtn' class="btn btn-primary" type="submit" onclick='update();'>Submit</button>
</div>>Solution :
You put a button inside another button. Remove btn btn-primary from the span inside the block button.
function toDefault() {
const btn = document.getElementById('submitBtn');
btn.innerHTML = '<span>Submit</span>';
}