The Bootstrap modal is making the content below shift to the left

Encountering an issue with our Bootstrap modal causing the content to align left, specifically on certain Macbooks using Chrome. Interestingly, the problem is present on my co-worker's computer but not on mine, even though the specifications are the same.

Refer to the screenshot below to see how the "Summary, Interests, Experience..." menu and the graphs are off-center, pushed far left instead of being centered on the page.

Despite my experience as a developer, I find this issue puzzling as it doesn't seem to be related to user-agent specifics. We are utilizing Bootstrap 4 Modals.

https://i.sstatic.net/38rtZ.jpg

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

An issue has been identified in Bootstrap(BS) 3.x.x that has been documented.

To address this issue, please refer to the following link for more information: https://github.com/twbs/bootstrap/issues/9855

It appears that the issue has been resolved for BS 3.x.x, but has not been addressed in BS4.

To resolve the problem, it is recommended to display the modal scrollbar over the scrollbar of the html content.

Try implementing the solution below and let me know if it resolves the issue.

html {
  overflow: hidden;
  height: 100%;
}
body {
  overflow: auto;
  height: 100%;
}

/* when the modal opens */
.modal-open {
  overflow: auto; 
}

The class modal-open is added to the body when the modal is open.

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

Having issues with the basic KnockoutJS binding not functioning as expected

There appears to be an issue with my KnockoutJS script that I'm struggling to pinpoint. Below is the snippet of HTML code: <h2>SendMessage</h2> <div class="form-group" id="messageSender"> <label>Select User Type</l ...

javascriptjqueryhtmlknockout.js

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

I recently started learning JS, Jquery, and CSS. My goal is to create a Simon Says style game. However, when I attempt to animate the computer to automatically light up the correct square, I faced some challenges. To address this issue, I decided to star ...

javascriptjquerycss

Attempting to align a FieldSet in the middle of the page

Having trouble aligning a field set within a div. The first two elements are centered right next to each other, but the third one is justified left and I'm struggling to center it within the div. JSP <tr> <th> <span onclick="toggleDiv ...

htmlcss

I encountered an issue where my button's onClick function was not functioning properly with the clickable component

Here is my display I have a component(Product) that can be clicked. One of its children is also a button. However, when I click it, the Product's function runs. How can I make sure my button executes separately? <ProductForm> ...

javascripthtmlcssreactjs

Vue is struggling to load the component files

Lately, I've been encountering an error during webpack build that is causing some issues. ERROR There were 3 errors encountered while compiling The following relative modules could not be found: * ./components/component1.vue in ./resources/assets/ ...

javascriptwebpackvue.js

Submitting a JSPX form to interact with PHP backend

Can a JSP/JSPX form be used to submit data to a PHP file? The PHP file will handle validation and database updates, then send a response back to the same JSP/JSPX form. The process should be done using AJAX with jQuery. What steps are involved in achievi ...

phpjavascriptjqueryajaxjsp

Tips for locating an element beyond the page source with Puppeteer

My goal is to extract specific information from a webpage by utilizing this code snippet to target an element and retrieve certain values within it: const puppeteer = require('puppeteer'); function run (numberOfPages) { return new Promise(a ...

javascriptnode.jsweb-scrapingcss-selectorspuppeteer

Unable to save screenshot in the report portal while running with WebDriver.io (wdio) execution

In my webdriverio project, the directory structure is as follows: e2e/ utilities/pUtil.js report/screenshot specs wdio.config.js Within pUtil.js file, I have the following code snippet: static takeScreenshot(name, failure = false, test) { const path = ...

javascriptseleniumjenkinswebdriver-io

The confusion arises from the ambiguity between the name of the module and the name of

In my current scenario, I am faced with the following issue : module SomeName { class SomeName { } var namespace = SomeName; } The problem is that when referencing SomeName, it is pointing to the class instead of the module. I have a requireme ...

javascripttypescript

Steps to remove a row from a table in a ReactJS component

I'm struggling with implementing a delete operation for table rows and encountering errors. Any assistance in resolving this issue would be greatly appreciated. Since I am unsure how to set an auto-incrementing id, I used Date.now(). Now my goal is t ...

javascripthtmlreactjs

Unusual behavior exhibited by ng-if within a widget

Hey there, seeking some assistance here. I'm currently making edits to a widget and within the client HTML code, I've come across two ng-if statements (the first one was already there, I added the second). <li> <a ng-if="data.closed ...

htmlangularservicenow-client-scripts

Insert round sphere shapes in the corners of the cells on the Table

I am working on a GUI representation table that features cells with spheres in the corner. Additionally, the footer contains a plus symbol (font-awesome icon) in the corner. I have attempted to place the sphere so that it aligns only inside the cell. Here ...

htmlcsshtml-tablecss-shapes

Looking to tally up the variety of items in Django?

Before, I had a table with a client summary list. One column showed object types and the other displayed the quantity of each object type. @login_required def client_summary(request, client_id): client = models.Client.objects.get(pk = client_id) i ...

pythonhtmldjangotagscount

What is preventing me from performing CPU profiling in Node.js when the process is blocked by the operation String(str).replace(some_regexp, '')?

As an illustration, the blow function testReplace will block the Node.js process: function testReplace() { let str = '<br/> 早餐后自由活动，于指定时间集合自行办理退 ...

javascriptnode.jsv8

Encountering a PropertyTypeError while attempting to process a payment via Stripe in conjunction with use-shopping-cart on Next.js

Upon reaching the checkout page, I encounter the message: Invalid value with type "undefined" was received for stripe. Valid type for stripe is "string". This issue seems to be related to the redirectToCheckout function. Can someone assist me? The cart-s ...

javascripttypescriptnext.jsstripe-payments

Create a specific website link for searching on YouTube

Is there a way to generate a YouTube URL using JavaScript or PHP that searches for videos on a specific user account and displays the best title match at the top of the search results? This is the code I am currently using: <!DOCTYPE html> <head ...

javascriptyoutube

The input tag contains an empty Request.Form

My issue lies in using Request.Form to retrieve text from an input field, as the value always ends up being empty. My goal is to extract the text value from the input tag and use it to query my database. I have attempted to write to an ASP TextBox but enco ...

javascriptc#htmlasp.netrequest.form

Did I incorrectly pass headers in SWR?

After taking a break from coding for some time, I'm back to help a friend with a website creation project. However, diving straight into the work, I've encountered an issue with SWR. Challenge The problem I'm facing is related to sending an ...

javascriptnext.jsapi-designswr

Troubleshooting: Issue with Jquery functionality when selecting an item from dropdown menu

I've been trying to dynamically select an item from a dropdown menu, but for some reason it's not working even though I've followed the suggestions on this forum. Here is my HTML: <div> <div class="form-group"> <la ...

javascriptjqueryhtml

Attempting to create a TypeScript + React component that can accept multiple types of props, but running into the issue where only the common prop is accessible

I am looking to create a component named Foo that can accept two different sets of props: Foo({a: 'a'}) Foo({a: 'a', b: 'b', c:'c'}) The prop {a: 'a'} is mandatory. These scenarios should be considered i ...

javascriptreactjstypescript