What causes the button size to change in Bootstrap when switching to a spinner?

Every time I switch from a spinner back to a button, the button's size changes. I am struggling to identify the cause of this issue.

function resizeButton() {
  var btn = document.getElementById('submitBtn');

  btn.innerHTML =
    '<span class="spinner-border spinner-border-sm"></span>';
  setTimeout(resetButton, 5000);

}

function resetButton() {
  const btn = document.getElementById('submitBtn');
  btn.innerHTML =
    '<span class="btn btn-primary">Submit</span>';
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6838e8e959295938091a1d5cfd2cfd0">[email protected]</a>/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='resizeButton();'>Submit</button>

</div>

javascripthtmlcssbuttonbootstrap-5

Answer №1

By placing a button within another button, you have created an issue. Please remove the classes btn btn-primary from the span element inside the block button.

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

Answer №2

Due to

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

In case you wish to overwrite them,

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

It might be necessary to include a parent selector before them in order to give priority to your rule.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Height of the liquid division

I'm encountering an issue with my CSS layout. I have a container containing two columns, each styled with the following CSS: #project-desc{ float: left; width: 500px; } #project-images{ float: right; width: 300px; } I've use ...

phphtmlcsscss-float

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

javascripthtmlcss

Is there a way to create a transparent background for my website without affecting the visibility of the content such as images and text?

I'm currently working on a website for a school project, and I've run into a minor issue. I can't seem to make the background of the body transparent without affecting the content within it. Below is my HTML code: <html> <head> ...

htmlcssbackgroundopacitytransparent

Leveraging sessions within the CSS Declaration

Struggling to pass the css file name to my razor page through session. Here's what I've got: Current line of code: <link href="@Url.Content("~/Content/epp.css")" rel="stylesheet" type="text/css" /> Trying to pass 'epp' as a Ses ...

c#cssasp.net-mvcrazor

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...

javascripthtmlangulartypescript

JQuery failing to trigger AJAX function

I'm struggling with what seems like a simple issue and it's driving me crazy. The problem lies in this straightforward section of the website. I have a .js file that uses ajax to save a post into the database when the submit button is clicked. A ...

javascriptphpjqueryajax

Access an HTML page programmatically using JavaScript

Make sure to have a confirmation window pop up before submitting the form, and after confirming submission (by clicking OK), redirect to a confirmation page. Here's an example code snippet: <button type="submit" value="Save" id="Save" onclick="cl ...

javascripthtmlconfirmation

Tips on moving a square along the z axis in three.js

Can anyone provide assistance with translating a square on the z axis in three.js? I would appreciate any examples or guidance on the best approach to achieve this. ...

javascripthtmltransformthree.jswebgl

I am looking to showcase the JSON output on a ReactJS interface

Here is the output of my JSON data I am using the Map function in ReactJS to display elements from a JSON array. I have attempted the code below and encountered an error stating "Cannot read property '_currentElement' of null." Can someone pleas ...

javascriptjsonreactjs

Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

When I invoke this.AssetLoadedFunc within the function LoadAssets(callback, user_data) LoadAssets(callback, user_data) { this.glg.LoadWidgetFromURL("assets/Js/scrollbar_h.g", null, this.AssetLoaded, { name: "scrollb ...

javascriptangulartypescriptecmascript-6dom-events

What is the best method for saving and retrieving a class object in a web browser's storage?

Looking for a way to create page-reload proof class instances in my Angular 2 application. Within my component's .ts file, I have defined the following classes: export class AComponent implements OnInit { foo: Foo = new Foo(); ngOnInit() { / ...

javascriptangularlocal-storage

Issues with Bootstrap tabs loading jQuery and Ajax are preventing the proper functionality

I am currently facing an issue with a tab pane designed using Bootstrap. The problem arises when attempting to load external pages into the tabs through Ajax using a jQuery script. While the ajax script successfully loads the content of the pages, I am en ...

javascriptjqueryajaxtwitter-bootstrap

What is the best way to attach a jQuery UI event handler to a button that has been dynamically generated?

Currently, I have a jquery ui modal dialog box form that inserts items into a table. A specific column in the table contains a button which serves as a link to edit the particular row. My goal is to attach an event handler to this button so that when a use ...

javascriptjqueryajaxjquery-ui

the slider HTML control is missing a value

Exploring the Range Input Type in HTML When adjusting the value on a slider (Range input type), that value is displayed in a textbox. However, making the same adjustment in the textbox does not update the slider's value. Below is the code snippet: & ...

javascripthtml

Changing an object into an array for saving and transforming it back to an array for usage in JavaScript

I am dealing with a unique situation where I have an object created from dynamic checkboxes in Angular. The structure of the object looks like this: {"United States":true,"Canada":true,"Australia":false} While this format works well for storing values, I ...

javascriptarraysangularjsobjectmongoose

Using jQuery to dynamically render unordered lists from JSON data

Struggling to create a dynamic unordered list with multiple nested levels? Finding it difficult to render the necessary markup for future functionality? Take a look at the HTML structure I've created on this jsfiddle link: <ul class="nav nav-sideb ...

javascriptjqueryhtmlarraysjson

What is the reason for Range.getBoundingClientRect() returning 0 for a range that is inside a textarea

When working with a <textarea> element and creating a range inside it, the following steps are taken: A new range is created using document.createRange() The only child node of the <textarea> is retrieved using textarea.childNodes[0] Range st ...

javascripthtmlcssrangegetboundingclientrect

Adjusting the vertical dimension of an Angular 17 Material Dropdown Field?

Check out this demo where I'm exploring ways to decrease the height of the select field. Here's the code snippet: <mat-form-field appearance="outline"> <mat-label>Toppings</mat-label> <mat-select [formControl]=& ...

htmlcssangularsassangular-material

Bottom-aligning text in Tailwind CSS

Creating two <p> tags to store text: <p v-if="my_property <= 0" class="text-green-500 text-lg font-bold">{{Math.abs(my_value)}}%</p> <p v-else class="text-red-500 text-lg font-bold">{{my_value}}%< ...

htmlcssvue.jstailwind-css

Issues with triggering onScroll event in Internet Explorer 11

<html> <head> <style> div {`border: 1px solid black; width: 200px; height: 100px; overflow: scroll;` } </style> </head> <body> <p>Experience the magic of scrollbar within ...

javascripthtmlcss