Preventing the page from scrolling to the top while utilizing an Angular-bootstrap modal and a window position:fixed workaround on an iPad

It's common knowledge that there is a bug in bootstrap modals on certain devices, causing the page behind the modal to scroll instead of the modal itself (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards)

An easy fix for this bug is to add a CSS rule .modal-open { position: fixed; }.

However, this quick fix leads to another issue - when a modal is opened, the page automatically scrolls to the top. This can be solved using JavaScript, like so:

But here's the dilemma: I am utilizing the angular-bootstrap package, which replaces bootstrap jquery events with promises. Due to this, I'm unsure how to set up global handlers for all modals on show/hide events. With numerous modals in my code, it's not ideal to define these handlers individually for each modal call.

Does anyone have suggestions on overcoming the scroll to the top problem within my current setup?

javascriptcssangularjstwitter-bootstrapangular-bootstrap

Answer №1

Perhaps this approach could be worth trying out. The close function is designed to trigger when the modal is closed, which in turn prevents the page from scrolling back up.

ngOnInit(): void {
 document.body.style.position = 'initial';
 document.body.style.top = `-${window.scrollY}px`;
 ...
}

close(result?: any): void {
 this.activeModal.close(result || {});

 const scrollY = document.body.style.top;
 document.body.style.position = '';
 document.body.style.top = '';
 window.scrollTo(0, parseInt(scrollY || '0') * -1);
}

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

Input field modified upon focus

I am currently using selectize js in my section to create a select box. My goal is to make the input editable after selecting an option when it is focused on. Check out the live demo: live demo HTML <label>Single selection <select id=" ...

javascripthtmljqueryselectize.js

Adjusting body styles in a NextJS application using localStorage prior to hydration: A step-by-step guide

If you visit the React website and toggle the theme, your choice will be saved in localStorage. Upon refreshing the page, the theme remains persistent. In my NextJS project, I am attempting to achieve a similar outcome by applying styles to the body eleme ...

javascriptreactjsnext.js

Change button to an ajax spinner when it is clicked using jQuery

$(".post-btn").html("<img src='../images/loader.gif' />"); Why isn't this code working? I know I have the correct selector because when I tried $(".post-btn").text('test'), it worked. I want the text of the button to change ...

javascriptjquerycssajax

Tips for ensuring the border matches the size of the image

I am in the process of creating a website that includes a filter option. My plan is to have the filters displayed on the left side and the items on the right side. To achieve this layout, I have implemented a scrollable div for the items. However, I notic ...

javascripthtmlcss

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

I have been attempting to solve the issue at hand without much success. As a newcomer to web development, I have been working on creating a basic app using angularjs and bootstrap. My pages are fairly sparse, consisting only of a few inputs and buttons t ...

javascripthtmlcssangularjstwitter-bootstrap

Colorbox scalePhotos function malfunctioning

The scalePhotos option in Colorbox does not seem to be working correctly for me. I have tried various methods to set it, including initializing Colorbox using the following code snippet right before the closing </body> tag in my HTML: jQuery('a ...

javascriptjqueryhtmlcsscolorbox

Exploring the topic of AngularJS unit testing and working with httpBackend timeouts

I have experience in the testing world, particularly with TDD using tools like mocha, sinon, chai, and nodejs. Recently, I've been finding AngularJS testing a bit challenging to grasp and implement. Currently, I am trying to test the simplest method ...

javascriptangularjsunit-testing

JavaScript accordions failing to open

I've encountered an issue with my website that includes JS accordions. Strangely, they are not opening on the live site, but they function properly on Codepen. I checked the console in Chrome and found no error messages, however, when I looked at the ...

javascripthtmlcssaccordion

What is the technique for combining a string and an HTML element using literal values?

Trying to merge text with a hyperlink: const myText = `${t('privacyTxt')}` + `${<a>{t('privacyLink')}</a>}`; output: If you want to know more about our data processing, check out our[object Object] What else do I need ...

javascriptreactjstemplate-literals

Is there a JavaScript API available for conducting currency calculations?

I'm facing an arithmetic problem that requires handling decimal numbers in JavaScript. Is there an API available for performing comparison, subtraction, and addition of decimals that also supports locale/language-specific formatting? Any suggestions o ...

javascriptcurrencyjavascript-framework

Move information from one page to another

I'm currently using Ionic 2 and attempting to pass data from one page to another. Specifically, I want to transfer the data of a selected list item from the first page (quickSearch) to the second page (quickSearchDetail). To illustrate this, refer to ...

javascriptangulartypescriptionic2

Using the Context API dispatch (consumer) within the _app.js class component in Next.js

How can I access the dispatch Context API methods in the _app.js file? The issue I am facing is that I am using React hooks along with Context API, and as _app.js is a Class component, I cannot directly use hooks within it. Below is my current code snipp ...

javascriptreactjsnext.js

Is it possible to configure the Eclipse Javascript formatter to comply with JSLint standards?

I'm having trouble setting up the Eclipse Javascript formatting options to avoid generating markup that JSLint complains about, particularly with whitespace settings when the "tolerate sloppy whitespace" option is not enabled on JSLint. Is it possible ...

javascripteclipsecoding-stylejslint

The emission from Socket.io is originating from the recipient's browser without being transmitted to the sender's browser

Hey there, I'm fairly new to socket.io and not completely sure if what I'm doing is the standard way, but everything seems to be working fine so I guess it's okay. I've been working on a chat application where messages are stored in a d ...

javascriptnode.jssocketswebsocketsocket.io

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

I tried implementing some basic CSS from to create a sticky footer that remains at the bottom of the page regardless of content length. However, I am encountering a problem with the footer not behaving as expected. There are actually two issues with the f ...

cssfootersticky-footer

Ways to identify when a file download has finished with the help of javascript

let pageUrl = "GPGeneration_Credit.ashx?UniqueID=" + __uniqueId + "&supplierID=" + supplierID + "&CreditID=" + OrderIds; window.open(pageUrl); // Want to check if the file download is complete and then refresh the page location.r ...

javascript

"Enhancing Code Functionality in React - Seeking Ways to Improve

When working with Redux, I often find myself repeatedly using the same piece of code: const dispatch = useDispatch() Then, every time I need to call a function, I do something like this: dispatch(endpointError(true)) My goal is to streamline this proce ...

javascriptreactjsfunction

Is it considered fundamentally inappropriate to call $scope.$digest within $scope.$on?

I recently inherited some AngularJS code, and my knowledge of both the codebase and Angular itself is limited. Within the code I inherited, there are instances where $scope.$digest is being called inside a $scope.$on method within a controller. Here's ...

javascriptangularjsangularjs-scope

Making an asynchronous request using Ajax to verify the status of a checkbox

I have two checkboxes, and I want to make an ajax call to a jsp page when one of the checkboxes is clicked. The jsp page should display a table with data fetched from a database. The issue arises when dealing with two checkboxes: <div class="search-in ...

javascriptjqueryajaxjspcheckbox

Eliminating pins from Biostall Google Maps plugin in CodeIgniter

After successfully setting up the Biostall Google Maps for Codeigniter, I am now looking to remove specific markers using ajax. The JavaScript code being executed is as follows: var myLatlng = new google.maps.LatLng(53.236114, 6.496444); var markerOption ...

javascriptjqueryapigoogle-maps