Unexpected Placement of Bootstrap 4 Table Spinner in Chrome and Internet Explorer

I am struggling to create a dynamic spinner within a table's tbody using Bootstrap 4. Here is what I have attempted so far:

HTML

<div class="container mt-2">
 <div class="card">
  <div class="card-body">
    <div class="row">
      <div class="col-md-12">
        <div>
          <span class="table-title">table</span>
        </div>
        <hr>
        <div class="table-responsive text-nowrap">
          <table id="contact-list" class="table table-striped table-bordered table-sm bstable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Click</th>
              </tr>
            </thead>
            <tbody>
              <td>a</td>
              <td>b</td>
              <td>c</td>  
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.bstable tbody {
  position: relative;
}
.bstable tbody .overlay-spinner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

JS

var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>;
$( '.bstable' ).find( 'tbody' ).append( '<div class="overlay-spinner text-center">' + s + '</div>' );

When testing on Firefox, the spinner displays correctly within the tbody, but on Chrome, Edge, and Explorer, it appears above the table.

Here is my JSFiddle

I'm struggling to pinpoint the issue. Can you assist me in resolving this problem?

Thank you

cssbootstrap-4

Answer №1

For optimal display, place the spinner within the div wrapping your table rather than directly inside the table body using JavaScript. To center the spinner perfectly, adjust its position to be at the top 50% and left 50%, then further fine-tune the alignment by accounting for the spinner's height and width. Additionally, remove the bottom margin from the parent div of the table to ensure the spinner is precisely centered within the table.

var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>';

$('.table-responsive').append('<div class="overlay-spinner text-center">' + s + '</div>');
table.table {
  margin-bottom: 0;
}

.table-responsive {
  position: relative;
  margin-bottom: 1rem;
}

.overlay-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -1rem;
  margin-left: -1rem;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0);
  /*dim the background*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container mt-2">

  <div class="card">
    <div class="card-body">

      <div class="row">
        <div class="col-md-12">
          <div>
            <span class="table-title">TABLE</span>
          </div>
          <hr>
          <div class="table-responsive text-nowrap">
            <table id="contact-list" class="table table-striped table-bordered table-sm bstable">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Click</th>
                </tr>
              </thead>
              <tbody>
                <td>a</td>
                <td>b</td>
                <td>c</td>
              </tbody>
            </table>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

Answer №2

Here is the solution provided:

I have used the 'tr' tag as the wrapper element for the loader.

The loader remains vertically centered regardless of the number of rows added. However, it is important to explicitly set the colspan whenever a new column is added or removed to ensure that the loader remains horizontally centered.

Feel free to replace the 'loading' text with your preferred loader animation.

table {
  position: relative;
}

tbody {
  background-color: yellow;
  position: relative;
}

.loading {
  position: absolute;
  background: antiquewhite;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
  width: fit-content;
}
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Click</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>

    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>

    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>

    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>

    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
    </tr>

    <tr class="loading">
      <td colspan="3">
        loading
      </td>
    </tr>


  </tbody>
</table>

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

How can you easily ensure your React web app is responsive?

As I delve into building a web app using reactjs, one particular challenge I encounter is ensuring its responsiveness. An issue arises when the browser size changes, causing my components to overlap and lose alignment. Is there an easy solution to preven ...

cssreactjsresponsive-design

Customizing Material UI tooltip styles with inline CSS formatting

Currently in the process of creating a React component that utilizes the Material UI Tooltip feature. In my component, I have the need to manually reposition the Mui Tooltip by targeting the root popper element (MuiTooltip-popper). However, the Mui Toolti ...

javascriptcssreactjsmaterial-ui

Most effective technique for resizing HTML elements

Currently, I am exploring different methods to scale HTML elements for a large screen, such as a kiosk. I have been using CSS3 scale() to achieve a relatively cross-browser scale, but I am curious if there are better options available. My main focus is on ...

htmlcsssvgwidgetscale

Controling attributes during the design process

Experimenting with a basic User Control in Visual Studio 2008: I've created a Panel called Wrapper with various controls inside. Will Visual Studio be able to handle this during the design phase? public partial class TestControl : System.Web.UI.UserC ...

cssvisual-studio-2008user-controlsdesign-time

Angular 4 allows the addition of an image from right to left upon clicking

I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right. What I'm aiming for is to have the images appear from right ...

htmlcssangular

Issue with Jquery not updating the background-size attribute

Having just started out, I'm having trouble understanding why my code won't properly execute the following: var h = $( window ).height(); $('.bg').css({ 'height' : h, 'background-size' : "auto" + h }) Sp ...

jquerycssbackground-size

Updating class after refresh of ng-repeat in AngularJS/Javascript

I am currently using angularJs in conjunction with cordova. Within my ng-repeat loop, each item has an ng-click event that stores the value of the item in an array. Additionally, when I click on an item, it toggles a class on the corresponding div (using ...

javascriptcssangularjsarrayscordova

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

What steps can I take to improve the design of this layout created using Twitter Bootstrap?

Currently, I am designing a sample form layout using Twitter Bootstrap. The form displays fields horizontally, with a link between each field. My goal is to have bullet points appear on the right side of the fields when the link is clicked. However, the al ...

htmlcsstwitter-bootstrap

Tips for choosing the ancestor's ancestor in CSS

<div id="maincontent"> <div id="content"> <div id="admin"></div> </div> </div> Looking for a CSS rule that will target #maincontent only when #admin is present? I have a background color set in the admi ...

csscss-selectors

Is it possible to customize the arrow on a drop-down menu?

Here is an example of the page I am facing issues with: If you look at the right side of the bottom bar, you will notice a selection option for different themes. I have been attempting to replace the down arrow with an image. Below is the code I have used ...

htmlcss

While reviewing my HTML code, I couldn't locate a particular line of code responsible for changing the display of my webpage. However, upon inspecting the element, I discovered that

<h2><a class="label label-info" target="_blank" href="http://www.avis.com.pk/"> Avis</h2> </a> <h4> <span class="label label-primary"> Rent A Car Service</span></h4> There is an Inspect Element image attach ...

htmlcss

Excessive vertical space is utilized by the vertical images in the CSS grid image gallery

My responsive CSS grid gallery is experiencing issues with vertical images disrupting the layout, as they appear at full size instead of remaining square like the others. How can I fix this problem? Thank you! Below is the code snippet: <div id=" ...

cssimagegrid

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Hello there, I am currently using Bootstrap-vue to display data that has been queried from a database. My goal is to have it displayed with an overflow-y style similar to this image. If you know how to achieve this effect, please share your solution. Here ...

htmlcssvue.jsbootstrap-4bootstrap-vue

Issues with jQuery scroll effect not functioning properly in Firefox due to transformation errors

I've encountered an issue with implementing a scroll effect in Firefox. The code works perfectly fine in Chrome, Safari, and Opera, but for some reason, it's not functioning properly in Firefox. I have carefully reviewed the '-moz-transform& ...

javascriptjquerycssfirefoxscroll

Multiple buttons in a single field

I am attempting to replace a Dropdown list with a series of buttons that will streamline the choices previously displayed by the dropdown list. Specifically, we are using graphic png files for the types of buttons. We experimented with checkboxing and ra ...

phpjavascriptmysqlcsswebforms

Encountering a glitch when integrating Bootstrap 4 with Rails 6 Webpacker

My Rails 6 application is set up with jQuery in the following configuration: config/webpack/environment.js : const { environment } = require('@rails/webpacker'); const webpack = require('webpack'); environment.plugins.append('P ...

ruby-on-railswebpackbootstrap-4webpacker

What is the best way to implement <li> in place of <div> to ensure the tool-tip code functions properly?

To see an example, please refer to this fiddle: http://jsfiddle.net/66nLy/12/ I am looking to achieve a similar functionality on a webpage, but using <li> instead of <div>. Here is the HTML code snippet: <table class="base-table selection- ...

javascriptjqueryhtmlcss

What are the steps to creating code that meets the high-quality standards of Themeforest

My plan is to sell bootstrap templates on the themeforest market but my first template got rejected. I believe the issue lies in the code structure and organization. Could you recommend any books or video courses that can help me write code that meets The ...

htmlcsstwitter-bootstrap-3

The hover CSS effect in the dropdown menu does not apply to sibling elements, but does work on descendant elements

Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an a ...

htmlcssdrop-down-menu