Unable to access the vertical scrollbar in the browser due to a fullscreen fixed bootstrap modal

Bootstrap 4 is being utilized in my current project, where I have made modifications to the modal style to achieve a fullscreen effect. The following CSS code showcases the changes:

.modal.show  {
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  align-content:center;
  align-items: flex-start;
}

.modal-body {
  padding: 0;
  margin: 0;
}

.close {
  color: #aaa;
  position: absolute;
  /* background: blue !important; */
  border: 0;
  top: 0;
  z-index: 99999;
  right: 3%;
  float: none;
  opacity: 1;
  font-size: 40px;
  font-weight: 400;
}

.modal-backdrop.modal-backdrop-transparent {
  background: #ffffff;
}

.modal-backdrop.modal-backdrop-transparent.in {
  opacity: .9;
  filter: alpha(opacity=90);
}

.modal-backdrop.modal-backdrop-fullscreen {
  background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
  opacity: .97;
  filter: alpha(opacity=97);
}

.modal-fullscreen {
  background: #fff;
    min-width: 100%;
    margin: 0;
}

@media (min-width: 768px) {
  .modal-fullscreen .modal-dialog {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .modal-fullscreen .modal-dialog {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .modal-fullscreen .modal-dialog {
    width: 100%;
  }
}

.modal-dialog {
  position:fixed;
  padding: 0;
  max-width: 100%;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow:auto;
}

Upon attempting to scroll down using the vertical scrollbar of the browser, I have encountered an issue where it does not respond, requiring the use of a mouse scroll wheel instead of direct clicking.

The root cause of this problem lies with the fixed positioning required for achieving the fullscreen effect. In need of assistance to identify and resolve this scrolling limitation.

For a visual demonstration of the issue, feel free to check out this live demo on jsfiddle: https://jsfiddle.net/odbjcpt2/1/

While using FLEX instead of FIXED may temporarily alleviate the problem in certain scenarios, it does not offer a viable solution within the context of my project as illustrated by the example provided.

Your expertise and guidance are greatly appreciated.

Answer №1

The issue in your JSFiddle seems to be related to the div containing Lorem Ipsum text. It is inheriting pointer-events: auto; from the .modal-content class and if you remove that, it then inherits pointer-events: none; from the modal-dialog class. Removing both of these resolves the problem.

UPDATE

I suspect the problem stems from setting your .modal-dialog class with fixed position and overflow auto.

According to the Bootstrap documentation:

Modals use position: fixed, which can sometimes have rendering issues. It's recommended to place your modal HTML at a top-level position to avoid conflicts with other elements. Problems may arise when nesting a .modal within another fixed element.

After some testing, I found that by removing position:fixed; and overflow:auto; from the .modal-dialog class in your CSS on JSFiddle, the problem disappears.

ANOTHER UPDATE

I also noticed that you have defined .modal-dialog twice in your CSS – once with flex position and then again with fixed positioning. This duplication might have been an error during copy/paste. Nonetheless, I believe the underlying issue persists because the .modal-dialog div is fixed and nested inside your .modal div, contrary to the Bootstrap guidelines of not placing a fixed element within a .modal container.

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

What is the best method to store the name of an image as a session variable?

<!--images acting as buttons--> <form> <img src="peanuts.jpg"" class="qac left" onclick="qac_search()" name="Peanuts"> <img src="milk.jpg" class="qac" onclick=&qu ...

Using a variety of images to fill various shapes on a grid canvas

I'm currently working on creating a hexagonal grid using canvas, with the goal of filling each tile with a unique pattern taken from an image. However, the code I have written seems to be applying the same image pattern to every tile in the grid, resu ...

Streamline the entire testing process of Google.Com by using Protractor to automate end-to-end testing

I need help with making Protractor navigate to google.com and search for a term. After successfully loading the non-angular page of Google, I am struggling to figure out how to make Protractor press "enter" or click the search button. Any suggestions? Ad ...

What could be the reason for PassportJS in Node failing to clear the session upon logout?

I am encountering an issue with my system not successfully logging out using PassportJS. The logout route appears to be triggered, but the session is not being removed as intended. I would like it to return a 401 error if the user is not logged in on a spe ...

Enhancing Accessibility of the 'Return to Top' Link

Currently, I am designing a web page that requires users to scroll extensively. To enhance the user experience, I have included a back-to-top link at the bottom of the page for easy navigation back to the top. This is the HTML markup I have implemented: ...

Unable to resize icons within bar-footer

My footer has a bar: <div class="crop modal"> <div class="crop-center-container"> <div class="crop-img" ng-style="{width: width + 'px', height: height + 'px'}"></div> </div> <div cla ...

Utilizing "beneath the scroll" on a bootstrap 5.1 webpage

I have a website built with Bootstrap and I am looking to implement a "below the flow" positioning for the footer, preferably using CSS. I have been referring to it as "below the fold," although I'm not sure if that is the correct terminology to use. ...

Using .htaccess file to optimize SEO crawling for single page applications that do not use hashbangs

When using a page with pushState enabled, the typical method of redirecting SEO bots involves utilizing the escaped_fragment convention. More information on this can be found here. This convention operates under the assumption that a hashbang prefix (#!) ...

Exploring JSON data and making precise adjustments in JavaScript

I am attempting to create my own database using JavaScript and JSON, but I have encountered some issues along the way. My main struggle is figuring out how to extract specific content from a JSON file. After doing some research, I came across this code sn ...

Guide to setting up an object array in JavaScript with unique child elements and no duplicate values

I have an array that looks like this: sampleArray = ["x", "y", "z". "a.b", "a.b.c", "a.b.d", "a.e.f", "a.e.g"] However, I am aiming to transform it into the following structure, or something similar to it: newArray: [ { "x": [] }, ...

Aligning MaterialUI Grid items vertically within various Grid containers

Looking to implement a design that features three vertical columns. The first and last columns will display MaterialUI cards, while the middle column will showcase a vertical line with dots aligned vertically with the start of each card. The height of the ...

Picture is not appearing on the image carousel

I'm currently working on a dynamic image slider, but I'm encountering an issue where the images are not showing up. I can successfully upload images to my file directory, so I'm not sure if the problem lies within the database or elsewhere. ...

Creating stylish grid-based tables in Bootstrap 4

I'm currently updating the front-end of an application by utilizing bootstrap 4. I've encountered tables in certain sections of the application that I want to replace, so I'm converting them into a .row/.col grid system. While bootstrap prov ...

Picking a variety of elements and determining their heights using the height

I'm curious why this jQuery code isn't working as expected: hdr = $('.header-wrapper, #top-bar, #new-showroom-header').height(); My intention is to retrieve the heights of multiple elements and store them in a variable. I assumed that ...

Tips for getting a browser to clear the cache specifically for the .html files on your website

After making updates to a client's website, I'm encountering an issue where the browser is displaying a cached version of the site. The website consists of static .html files. Although clearing my browser's cache resolves the issue for me, I ...

Is it possible for Javascript to fetch a sound from the server once and then duplicate it across n different objects when loaded multiple times?

Incorporating Javascript into my work is crucial. Here's an example: sound = []; for (var i = 0; i < 20; i ++) sound[i] = new Audio("source.wav"); My concern is whether the sound will be retrieved from the server 20 times, or just once. I a ...

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

Changes on services do not affect the Angular component

Currently facing an issue with my Angular assignment where changing an element's value doesn't reflect in the browser, even though the change is logged in the console. The task involves toggling the status of a member from active to inactive and ...

Ways to dynamically update a div with data from a JSON response

I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code. For example: <div id="result" class="card"> <img src="hello.png" ...

Stop iFrame from inheriting parent CSS styles

Is there a way to prevent an iFrame object from inheriting CSS properties from the main page? Specifically: I have created an iFrame object in my main class, and I want to adjust the opacity of the main page without affecting the iFrame. However, when I ...