Unable to navigate through select2 dropdown if fixed div is present

I am facing an issue with select2 in my fixed div popup that acts like a modal. The problem is that when the select2 dropdown is open, I am unable to scroll the div until I close the dropdown.

This becomes problematic on smartphones because the keyboard ends up blocking the select options, making it impossible to scroll. Is there a way to ensure that the fixed div remains scrollable even when the select2 dropdown is active?

For reference, here's the fiddle link: https://jsfiddle.net/rezaiskandar/d8cu9ywf/34/

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.css" rel="stylesheet" />
<div class="fixed">
  <div class="content">
    <div class="content">
      <select class="selectt" name="hehe">
        <option value="" selected>choice 1</option>
        <option value="">choice 2</option>
        <option value="">choice 3</option>                                 </select>
    </div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letrasetsheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Answer №1

The reason for this behavior is that the container is being fixed using the position: fixed property. Share your preferred design so I can better understand your needs and requirements.

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

Methods for applying multiple styles within a div using the Document Object Model

Is there a way to add multiple style attributes using DOM `setAttribute` in JavaScript? I've tried doing it but it doesn't seem to work. Can someone provide guidance on how to achieve this? var modify = document.getElementById('options&apo ...

Locate a JQuery element within another JQuery element

Apologies for my poor grasp of English. I am working with HTML and JavaScript. <noindex> <h1>This is h1 in noindex</h1> <div> <h1>This is h1 in noindex and in div</h1> <div> <h1>This is h1 in noindex a ...

The header is displaying with the heading and image out of alignment

Take a look at my code header img{ width:10%; vertical-align: middle; } header h1{ text-align: right; display:inline; position: absolute; } header { width : 100%; height: 1% ; background: red; } <!DOCTYPE html> <html> <head> <m ...

Unable to retrieve data from Meteor find query

I have a collection created in collections.js portfolioItems = new Mongo.Collection('portfolioitems'); This collection is then subscribed to in subscriptions.js Meteor.subscribe('portfolioitems'); And published in publications.js M ...

Having difficulty invoking a PHP file with the $.post() function in Ajax

I've been attempting to call a PHP file in the same directory as my HTML using the $.post() method of Ajax. Unfortunately, I'm encountering a "file not found" (404) error. Here is the code snippet that I'm currently using: $(document).read ...

Tips for creating a flexible Cell component in react-big-calendar:

Is there a way to make the cell of react-big-calendar flexible depending on the number of events, and enable scrolling? Here is a screenshot showcasing my issue: https://i.stack.imgur.com/K2h69.jpg ...

Can the text within the <h3> element be displayed on top of the inline image without the use of <span> tags or background images?

Can the text inside an <h3> tag be displayed over an image without using <span> and images in the background? HTML <h3>sample caption 1<img alt="" src="banner4.jpg" /></h3> CSS h3{ } h3 img { } ...

There seems to be an issue with the .html() function in one of my

I'm currently in the process of transitioning my code to Angular and I could use some assistance with creating a directive. Here's what I'm trying to convert: jQuery(document).ready(function ($) { "use strict"; $('#cool-naviga ...

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

Type into the asp:TextBox and then click on my button, where it triggers a JavaScript function

So here's my issue: <asp:TextBox runat='server' /> <button id='b2'>hi</button> <script> $('#b2').click(function(e){ e.preventDefault(); alert('you clicked the button'); }); </script ...

jQuery Hide function malfunctions when the contents of divs are sorted

I stumbled upon some jQuery code that can arrange divs either numerically or alphabetically based on their content. To enhance this functionality, I included a feature to hide a div by clicking on it. While sorting the divs and hiding them individually wor ...

Using CSS background-image URL in .NET MVC tutorials

What is the correct way to route to an image in an MVC web application? MVC has default routes, meaning you can access the same page in multiple ways: 1. localhost 2. localhost/home/index However, you can also do it this way, changing the root directory. ...

Troubleshooting the issue of a callback function not properly updating state within the componentDidMount

I am currently utilizing Next.js and have the following functions implemented: componentDidMount = () => { //Retrieves cart from storage let self = this this.updateCart(Store.getCart(), self) ... } updateCart = (cart, self) => { ...

Personalize the option for yiiootstrap4ActiveField::radioList in Yii2

I am currently using yii\bootstrap4\ActiveField::radioList and I am attempting to include HTML tags inside the options of my radioList. $list = [ 0 => '<strong>Option1</strong><br> lorem ipsum lorem ipsum&ap ...

Ways to boost heap capacity in Corb2 for MarkLogic

I encountered a challenge while running my custom deletion framework on a massive dataset. When attempting to execute Corb2, I started receiving the warning below and occasionally even encountered errors due to insufficient memory. WARNING: Slow receive! C ...

Raycasting in three.js - mouse pointer and highlighting not precisely aligned with intersected mesh

My current setup involves using a raycaster to highlight a row of cubes arranged in a grid format. The highlighting works fine, but I'm encountering issues with the cursor turning into a pointer precisely over the cubes in the row. Moreover, the highl ...

Having trouble with the WordPress style file not functioning properly

I'm currently facing an issue while trying to upload a CSS file and a JavaScript file to a custom theme on WordPress. When I open the webpage, nothing appears and there are no elements displayed. However, when I delete the functions.php file, the webp ...

Delete all pictures beginning with this specific ID from the posts

Currently, I have approximately 300 Wordpress posts, and each one contains a "tracking pixel" from a previously used service (which is implemented using IMG tags). This is an example of how it appears: <img id="serviceTrack_3274570" style="margin: 0px ...

Issue loading a 300 MB file into BigQuery results in a timeout error

Trying to implement the Node.js example shown in the data post request section (located towards the end here: https://cloud.google.com/bigquery/loading-data-post-request) has hit a snag when dealing with larger files. While the sample code functions proper ...

Is there a way to capture the click event of a dynamically generated row within a panel?

Could you please advise on how to capture the click event of a row that is generated within a panel? I have successfully captured events for rows generated on a page using the , but now I need assistance with capturing events from rows within a panel. I c ...