Issue with enabling overflow-y: scroll within a Bootstrap Modal

I've implemented a modal using the Bootstrap library that contains multiple lists populated through Ajax search requests. These lists have a fixed size and utilize the CSS property overflow-y: scroll to accommodate a large number of elements without affecting the overall page size.

However, I've encountered an issue where selecting an item towards the bottom of the list causes the entire page to scroll to the position where that item would be displayed, disregarding the overflow-y: scroll property.

I attempted to address this by using the overflow: revert property to maintain the scroll position, but this solution proved ineffective, especially on smaller screens, as the fixed-sized lists prevent users from scrolling to view all elements.

Do you have any suggestions on how to resolve this issue?

Below, you'll find the simplified code snippet with a single list and white space allocated for additional elements, providing you with a clearer understanding of the situation.

htmljquerycssbootstrap-5

Answer №1

include $('.modal-body').scrollTop(1); within your function declarations:

function selectElement(e) 
{
    if (parseInt($(e).attr("seleccionado")) == 0) 
    {
        $(e).attr("seleccionado", "1");
        $(e).parent().appendTo("#listaSeleccionados").children("label").removeClass("btn-outline-success").addClass("btn-success");
        $('.modal-body').scrollTop(1); //****

    } 
    else
    {
        $(e).attr("seleccionado", "0");
        $(e).parent().prependTo("#lista").children("label").removeClass("btn-success").addClass("btn-outline-success");
        $('.modal-body').scrollTop(1); //****

    }
 
}
// show.bs --> shown.bs and eliminate setTimeout:
$("#modalTest").on("shown.bs.modal", function() {
     $("#lista").html(`<li id="seleccionarTodos" class="mt-1"><button type="button" class="btn btn-outline-primary rounded-pill w-100" id="btnSeleccionarTodos" autocomplete="off">Seleccionar todos</button></li>`);
     for (i = 1; i <= 1000; i++) 
     {
        $("#lista").append(`<li id="elemento` + i + `" class="mt-1">
                                 <input type="checkbox" id="chkElemento` + i + `" seleccionado="0" onchange="selectElement(this)" class="btn-check"  autocomplete="off">
                                 <label class="btn btn-outline-success w-100 check-lista" for="chkElemento` + i + `">
                                     <div class="text-start">Elemento ` + i + `</div>
                                 </label>
                            </li>`);
     }
  
 });

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 way to alter the text of a button when the mouse hovers over it?

I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...

javascripthtmlcssbutton

Struggling to accurately capture the values from checkboxes and dropdown selections to ensure the correct data is displayed. Assistance is needed in this

I am facing challenges in retrieving the accurate data for display from Mat-Select and Mat-Checkbox components. My goal is to capture the selected values from users and perform if-else statements to validate conditions, displaying the correct data view if ...

javascripthtmlangularangular-material

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

I wish to scroll down, and view #div1... also see #div2... When #div2 disappears from sight, I want #div1 to slide down and stay fixed at the top of the window. If I reach the footer div, I no longer want #div1 to remain sticky. If it's po ...

javascriptjqueryhtmlcss

The query pertaining to Facebook redirect functionality

I have a Facebook ad with a URL encoded in it, and I need to extract the final destination URL that it redirects to using JavaScript in my Python program. The standard urllib2/mechanize methods don't work because of the JavaScript involved, and as a P ...

javascriptpythonhtmlfacebook

Adjusting the rotation transform by deleting and reapplying canvas is causing the chart to not display data after redrawing

I am facing a challenge with my previous issue and I am exploring different solutions. One approach I am considering is to remove the canvas element completely and then re-add it, effectively resetting all rotations on the canvas. Although this method alm ...

javascriptjquerycsscanvaschart.js

Using a MySQL statement within a conditional statement

Looking to modify this code to display different information based on the values retrieved, here is the current code: $sql_doublecheck = mysql_query("SELECT * FROM adminpage WHERE setting='main' AND close_site='1'"); $doublecheck = mys ...

phphtmlmysql

Instructions on creating a non-editable text area where only copying and pasting is allowed

I am looking to simply copy and paste content into a textarea without needing to make any edits within the field. <form action="save.php" method="post"> <h3>Text:</h3> <textarea name="text" rows="4" cols="50"></textarea ...

javascriptjqueryhtmlcss

Text positioned beneath a toggle switch in html that overlaps

Is there a way to fix the issue of the label on the left side overlapping below the selector switch on my website? I want to ensure that both labels are perfectly distributed on each side of the switch. Here is the code snippet: <div class="ro ...

htmlbootstrap-4

Material-UI Swipeable Drawer with a see-through design

Any tips on how to apply a 'transparent' style background property to my SwipeableDrawer component from Material UI? I'm having difficulty changing the background directly from my code since the component generates another component in the H ...

javascripthtmlcssreactjsmaterial-ui

Employing jQuery to redirect to a different URL when a button is clicked

I've been experimenting with a project that involves both JQuery and AJAX. One of the features I have added is JQuery autofill. Here is the code snippet for the form: <form class="form-horizontal"> <div class="form-group"> < ...

javascriptjqueryajax

Jquery animation is dragging its feet on Explorer, while other browsers are zipping along

Hey everyone, I am facing an issue with a simple jquery plugin I created for an animated menu. You can check out the entire site here: Main website My Library the "bootstrap" file The problem is that the red rectangle animates smoothly in Firefox, Op ...

javascriptjqueryperformanceinternet-explorer-8

How to Retrieve URL Before Closing a jQuery Window Using window.open()?

Is it feasible to retrieve the URL of a window.open window after triggering a window.close event when the user clicks the close button? How can I obtain the last URL visited right before the window closes? ...

javascriptjqueryurlwindow

Creating a popup trigger in ReactJS to activate when the browser tab is closed

I am currently working on an enrollment form that requires customer information. If a user fills out half of the form and then attempts to close the tab, I want to trigger a popup giving them the option to save and exit or simply exit. While I have a jQue ...

javascriptjqueryreactjstypescriptecmascript-6

Storing Documents on Your Device

I've been working on a project to create a web page that provides links to online PDF files. When you click on these links, the file should be saved locally and its name/path added to local storage. I then aim to display all the saved files by iterati ...

javascripthtmlgoogle-chrome

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

htmlcss

How to make text dynamically shrink with TailwindCSS class 'flex-shrink-0'

I've designed an 'Album' (React) component to showcase album artwork, name, and release date in a card-like format. This component consists of two divs - one for the photo and the other for text. Each artist's discography displays multi ...

javascriptcssreactjstypescripttailwind-css

Is it possible to use calc with the display property set to table-cell?

I have created a structure using divs to mimic table elements for an entry form. My goal is to make the left column, where field labels are located, 50% wide with an additional 2 em space to accommodate an asterisk marking required fields. The right column ...

htmlcsswidth

What is the best way to determine the midpoint index of an array?

As a newcomer, I have a question regarding a recent assignment. The task involves creating a global array where objects are imported as they are entered into an input field on the HTML document. The challenge is to update the current list on the document ...

javascripthtmlarraysindexing

Incorporate Angular exclusively in pages that are dynamically loaded via ajax requests

<html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script> </head> <body> <div id="ajax-content-here"> </div> </body> ...

jqueryangularjsangularjs-scope

Feeling lost when it comes to forms and hitting that submit button?

Below is a sample form structure: <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.abcdefg.com/my.cgi" method="POST"> <div align="center"> <br><br; <br& ...

javascripthtmlcss