Why does bootstrap resize the button when I toggle to a spinner?-CodePudding

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 ></span>';
  setTimeout(toDefault, 5000);

}

function toDefault() {
  const btn = document.getElementById('submitBtn');
  btn.innerHTML =
    '<span >Submit</span>';
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div >
  <button id='submitBtn'  type="submit" onclick='update();'>Submit</button>

</div>

CodePudding user response：

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>';
}

CodePudding user response：

Because of

btn-primary.focus, .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgb(38 143 255 / 50%);
}

So if you want to override those,

btn-primary.focus, .btn-primary:focus {
    box-shadow: none;
}

You might need a parent selector before those to make it prioritize your rule.