Ensure that the spinner div is horizontally centered within the side menu, even if a scroll

On my web page, I have a spinner component that can be added to different parts of the page as needed. The spinner is always centered according to its parent, which is in relative position, while the spinner itself is absolute. However, the issue arises when some of the spinner containers are scrollable; in these cases, the spinner is no longer centered. While I know that using position fixed can center content for scrolled elements, this only works when the content should be centered on the entire page.

In my specific scenario, is there a way to achieve proper centering regardless of scrolling? An example image and code snippet are provided below:

https://i.sstatic.net/rR6g0.jpg

html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
}

/* Remaining CSS properties included */

<body>
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  
    <div class="spinner-wrapper">
      <div class="spinner"></div>
    </div>
  </div>
  <div class="main">
    <div class="content">
      Content

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
    <div class="side-menu">
      Side menu

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</body>
htmlcss

Answer №1

To prevent scrollable content, you can simply add overflow:hidden in your CSS.

html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
  overflow: hidden;
}

.main {
  display: flex;
  height: 70%
}

.content {
  position: relative;
  overflow: auto;
  width: 70%;
  border: 1px solid grey;
  margin-right: 20px;
}

.side-menu {
  border: 1px solid grey;
  flex-grow: 1;
  position: relative
}

.spinner-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<body>
  <div class="header">
    Header

    <div class="spinner-wrapper">
      <div class="spinner"></div>
    </div>
  </div>
  <div class="main">
    <div class="content">
      Content

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
    <div class="side-menu">
      Side menu

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</body>

Answer №2

let screenWidth = screen.width;
screenWidth = screenWidth/2;
var spinnerLeftPosition = document.getElementById('spinner-wrapper').style.left = screenWidth + 'px';

function adjustSpinnerPosition() {
  let windowWidth = window.innerWidth;
  console.log(windowWidth);
  windowWidth = windowWidth/2;
  console.log(windowWidth);
  let spinnerLeft = document.getElementById('spinner-wrapper').style.left = windowWidth + 'px';
}
html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
}

.main {
  display: flex;
  height: 70%
}

.content {
  position: relative;
  overflow: auto;
  width: 70%;
  border: 1px solid grey;
  margin-right: 20px;
}

.side-menu {
  border: 1px solid grey;
  flex-grow: 1;
  position: relative
}

.spinner-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Unique HTML Page</title>
</head>
<body onresize="adjustSpinnerPosition()">
  <div class="header">
    Header

    <div class="spinner-wrapper" id="spinner-wrapper">
      <div class="spinner"></div>
    </div>
  </div>
  <div class="main">
    <div class="content">
      Content

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
    <div class="side-menu">
      Side menu

      <div class="spinner-wrapper" id="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</body>
</html>

Answer №3

Please review

html,
body {
  height: 98%;
}

.header {
  position: relative;
  overflow: auto;
  height: 26%;
  border: 1px solid grey;
  margin-bottom: 2%;
}

.main {
  display: flex;
  height: 70%
}

.content {
  position: relative;
  overflow: auto;
  width: 70%;
  border: 1px solid grey;
  margin-right: 20px;
}

.side-menu {
  border: 1px solid grey;
  flex-grow: 1;
  position: relative
}

.spinner-wrapper {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
  position: fixed;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<body>
  <div class="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</br></br></br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</br></br></br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</br></br></br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</br></br></br></br>

    <div class="spinner-wrapper">
      <div class="spinner"></div>
    </div>
  </div>
  <div class="main">
    <div class="content">
      Content

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
    <div class="side-menu">
      Side menu

      <div class="spinner-wrapper">
        <div class="spinner"></div>
      </div>
    </div>
  </div>
</body>

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

The background image does not have the body padding applied

When creating a fixed top nav bar, I added padding to the body tag so that the nav bar always stays on top like this: body { padding-top: 70px; } Now, I want to set a background image for the body that covers the entire screen, so I added the foll ...

htmlcsstwitter-bootstrap

Conceal a div element after redirecting to a different HTML page

I have a dilemma with my two HTML pages - index.html and register.html. I am trying to navigate from index.html to register.html, but I want to skip the select region step and go straight to the login page. Here's the code snippet I've been attem ...

javascriptjqueryhtmlcss

Tips for assigning dynamic #id(*ngFor) and retrieving its value in Angular2

In my HTML file, I have the following code snippet: <tr *ngFor="let package of packages"> <td *ngFor="let coverage of coverages"> <input type="hidden" #dynamicID [value]="coverage.id"> <-- Include an identifier with the vari ...

htmlangulardata-binding

Padding for the doughnut chart in Chart.js canvas

My current setup includes a canvas featuring a doughnut chart created with chart.js enclosed in a div element that displays like this: The canvas has a red background to enhance visibility. Currently, the chart is centered within the canvas with additiona ...

cssangularchart.js

Enable the use of custom tags containing hyphens in the kses filter for WordPress

I developed a specialized Wordpress plugin that enables users to incorporate custom HTML element tags (such as <my-element>) into the content of a Post. This allows users without the unfiltered_html capability to utilize predefined custom tags. The ...

phphtmlwordpress

Twitter Bootstrap 3 - Change column order for extra small screens

My Twitter Bootstrap layout consists of two columns structured like this: <div class="col-md-4 col-sm-6 col-xs-12"> <div class="post"> Content here </div> </div> <div class="col-md-8 col-sm-6 col-xs-12"> <di ...

htmlcsstwitter-bootstrapgrid-layout

Tips for organizing nested form rows with Bootstrap 4

I am currently working on a nested form row and I am looking to align the form fields vertically. The current output I am getting is shown below: https://i.sstatic.net/NEWGY.png Here is the code snippet: <link rel="stylesheet" href="https://maxcdn ...

htmlcsstwitter-bootstrapbootstrap-4

Using jQuery to make an AJAX request to a Java backend server in order to update and refresh an HTML list

As someone new to using jQuery / AJAX with a Java backend system, I'm looking for guidance on making my first call. I have an HTML list structured like this: <ul> <li>Test 1</li> <li>Test 2</li> <li>Te ...

javajqueryhtmlajaxjson

Changing the text in a Bootstrap tool-tip

Currently encountering an issue where I am attempting to modify the text displayed in a tooltip, but it appears that the change is not taking effect. Instead, upon hovering over, you will see the text "your new title." My goal is simply to alter the text w ...

jqueryhtmltwitter-bootstrap-3

Prevent form from being resubmitted upon browser refresh

Currently, I have a form where users input data and it searches the database to display results. The issue arises when the user refreshes the page as it triggers an alert about resubmission. Although the data remains the same upon resubmitting, is there a ...

phpjqueryhtmlmysqlajax

The refreshed Google Chrome cache post-update on the Developer Dashboard

With each new Google Chrome update, developers experience a mix of benefits and drawbacks. Lately, I have noticed a change in how Chrome handles caching, with everything being cached successively without any disassembly. For instance: When working on a we ...

cssgoogle-chromecachingdeveloper-tools

Creating HTML tables dynamically using PHP

I am currently working on creating a dynamic HTML table by querying the database using PHP. I am facing some challenges in understanding how to combine two different loops to ensure the correct generation of the desired table. <table><tr> & ...

phpjqueryhtmlcodeigniter

What is the best way to control the overflow length and display only a specific amount of content at once?

I am currently designing the homepage for a social media platform. I have around 45 dummy posts and I am looking for a way to limit the overflow in CSS so that only 5 posts are displayed at a time. Once the user reaches the bottom of those 5 posts, another ...

javascripthtmlcssreactjsmaterial-ui

The positioning of Material UI InputAdornment icons is located beyond the boundaries of the TextField input area

I am struggling to understand why my InputAdornment is not positioned correctly. There doesn't seem to be any style in my code that would affect the location of the icon within the TextField (such as padding or flex properties). Currently, the calen ...

cssreactjstypescriptmaterial-uitextfield

A unique string containing the object element "this.variable" found in a separate file

Snippet of HTML code: <input class="jscolor" id="color-picker"> <div id="rect" class="rect"></div> <script src="jscolor.js"></script> <script src="skrypt.js"></script> Javascript snippet: function up ...

javascripthtmlthis

Adjust the location of the scrollbar without affecting the alignment of the text

Currently, I'm experiencing a design issue with the textarea tag in my React project. The layout looks like this: https://i.stack.imgur.com/JG1sm.png I am looking to shift the scrollbar to the right without altering the text direction (rtl). Utilizin ...

cssreactjsmaterial-ui

The alignment of Material-UI Button and ButtonGroup is not consistent

I'm puzzled as to why the Button and ButtonGroup elements are not aligned on the baseline in the code snippet provided. Is there a specific property that can be adjusted on the ButtonGroup element to achieve alignment? <!DOCTYPE html> <htm ...

cssreactjsmaterial-ui

The Javascript Image() function fails to load or render

I am currently in the process of developing a basic Sprite class for implementation in a canvas game. However, I am encountering an issue where the image specified during the creation of a new instance of the class does not trigger the onload or onerror ev ...

javascripthtmlimagecanvasonload

Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various appro ...

htmlcss

Transform Array into an unordered list with list items

Currently, I am dealing with a file that contains strings of file paths in the following format: ./CatDV/S1/SFX/steam/6004_90_04 LargeHeadlightSm.wav ./CatDV/S1/SFX/steam/AirHissPressureRe HIT032001.wav ./CatDV/S1/SFX/steam/Impact_Metal_Bullet_Hit(1).wav ...

phphtmlarraysmultidimensional-arrayhtml-lists