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

Reinitialize Yii2 form with jQuery without triggering mandatory data warning

I've tried multiple ways to reset the form, but none seem to work correctly. In Yii2, I keep getting a "data required" error even after clearing a field, and one of them doesn't even clear. Here is the Yii2 action function: public function acti ...

Using HTML and JavaScript to choose relatives from the extended family: Uncles and Aunts

Looking for a better way to target elements in your HTML code? <div class="chunk" id=""> <div class="chunkContent"> <div class="textLeft" ></div> <div class="textRight" ></div> <div class= ...

Experiencing issues in retrieving data post-login using ASP.net session key method

I have developed a website using AngularJS for the front-end and Windows webforms for the back-end. I believe that the Authorization process is carried out using ASP.net Session Key. The approach involves creating an AngularJS Post method for "login" foll ...

Position the div at the bottom of the page

I managed to successfully position the div at the bottom using this code snippet: #div { position: absolute; width: 100%; height: 58px; margin: 0 auto; bottom: 0; left: 0; overflow: hidden; } Lately, I decided to add a sidebar ...

Align the parent div center and have both dynamic and fixed width child divs inside

In the main parent div, there is a combination of my logo and navigation bar. The logo has a fixed width while the dynamic-width navigation bar is positioned 100px to the right of the logo. However, the current layout places them on the left side of the s ...

Send the Post model along with 2 checkbox lists to the controller using Jquery's Ajax function

How can I efficiently send 2 lists containing values of checked checkboxes along with my model using JQuery Ajax from an EditorTemplate used as a partial view? Here's the code snippet: @model EsdpExport.View_Models.ProductLineCreateViewModel @using E ...

Utilizing AngularJS for Your Business Website

We are in the process of developing a new commercial website to replace our current one. Concerns about performance are on our minds. The amount of data we have per page is not very heavy, with a maximum of 150 data binds. We plan to use AngularJS 1.2 t ...

Is there a potential bug in Chrome with the submit button appearing "depressed" when focused?

Why do submit buttons act differently in Chrome? <input type='text' placeholder='Dummy Input'/> <input type='submit'/> In Chrome, the active 'depressed' state of the submit button will only occur if the ...

Is there a way for me to identify the scrolling height and dynamically adjust the title using jQuery?

I am in the process of creating a list of shops from different countries for my website. I want to implement a feature that detects when the user has scrolled to a specific area so I can update the title at the top accordingly. My idea is to assign classe ...

Tips for overlaying text onto a MaterialUI icon

https://i.stack.imgur.com/cFr5Y.pngI am currently working on a project that requires me to overlay a number on top of an icon. Specifically, I am utilizing the MaterialUI ModeComment icon and attempting to display text over it. Despite trying the following ...

"Why does the React useState array start off empty when the app loads, but then gets filled when I make edits to the code

I'm facing a challenging task of creating a React card grid with a filter. The data is fetched from an API I developed on MySQL AWS. Each card has a .tags property in JSON format, containing an array of tags associated with it. In App.jsx, I wrote Jav ...

Update the configurable product process for the custom attribute 'delivery_time' in Magento 1.9.2

I am currently using Magento 1.9.2.4 (1.9.2.3 in my Testpage) and I have a few configurable products with multiple options. Each product (child of the configurable one) has a different delivery time. To achieve this, I created an attribute called "delivery ...

Is it possible to run concurrent PostgreSQL queries in NodeJS?

I'm unsure why, but the task is supposed to be run in parallel and should only take 2 seconds: const test = async () => { client.query("SELECT pg_sleep(2) FROM test", (err, result) => { console.log("DONE!"); }) client.query("SELECT pg ...

Utilizing a dynamically created table to calculate the number of neighbors

I have a challenge where I want to create a minesweeper game with numbers indicating how many bombs are nearby. For example, if there are two bombs next to each other and I click on a cell adjacent to them, it should display the number 2. Likewise, if ther ...

Is it possible for CSS to prevent the insertion of spaces?

When filling out a form, I am able to insert spaces in inputs but not in the textarea (which is necessary). Interestingly, inserting spaces in the textarea works flawlessly. <form action="/#wpcf7-f519-o1" method="post" class="wpcf7-form" enctype="mu ...

Tracking a razor ajax form using pace.js has never been easier with these simple steps

I'm currently exploring the use of pace.js with my Razor ajax form. The form generates a Partial View upon submission. Pace.js, as per its documentation, automatically monitors all ajax requests lasting longer than 500ms without any additional configu ...

Tips for showing data associated with the chosen option from a dropdown list in Angular.js fetched from an API

My goal is to automatically display the coordinator's name based on the selection in a dropdown list populated with data from an API. The dropdown options are the email addresses from the JSON data below, and upon selecting a login ID, the correspondi ...

Implementing Ajax image upload functionality in Symfony2 framework

I am trying to implement a functionality where clicking on an image opens a window to select a new image and update the screen. However, when attempting to change the picture in the database, I encountered the following error: Catchable Fatal Error: Arg ...

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is

I'm working on an application that heavily relies on AJAX requests, requiring the rapid or concurrent sending of multiple calls. The code snippet provided serves as a basic wrapper for sending AJAX POST requests within the app. However, I've enco ...

If the item already exists within the array, I aim to replace the existing object with the new one

I am faced with a situation where I have an array of objects, and when a user selects an option, it adds a new object to the array. My goal is to write a code that can check if this new object's key already exists in one of the objects within the arra ...