The drop-down menu selection is non-functional on mobile and iPad devices when using Bootstrap

<div class="panel panel-default">
        <select>
            <option value="B3">B3</option>
            <option value="B4">B4</option>                
            <option value="B5">B5</option>   
        </select>
    </div>
    

The code above seems to be causing some issues and I have also tried a different approach which you can check out here. However, it's not working as expected.

If anyone has a solution, I would greatly appreciate it! Thank you in advance for your help.

Answer №1

The code in version 2.1.0 (bootstrap-dropdown.js v2.1.0) already includes touchstart.dropdown.data-api in most of the .on() bindings. Simply remove touchstart.dropdown.data-api from the html binding for clearMenus located towards the end of the file.

Modify

$('html')
  .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)

To

$('html')
  .on('click.dropdown.data-api', clearMenus)

This change ensures that any menu is cleared when touching anywhere in the document.

Source

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

Error: The object being referenced (scope.awesomeThings) is undefined and unable to be evaluated

Each time I run the grunt test command, I encounter this error. I set up a project using yo angular and attempted to execute the example code provided in Yeoman's scaffold. Something seems to have gone awry here - below is the code snippet that I trie ...

Determine the character count of the text within an *ngFor loop

I am a beginner in Angular (8) and I am trying to determine the length of the input value that I have created using a *ngFor loop as shown below: <div *ngFor="let panel of panels; index as i" class="panel" [id]="'panel-' + panel.id"> & ...

The -moz-use-text-color property does not function properly in Chrome and IE versions 9 and above

I have added -moz-use-text-color for border-color in the following CSS code: .booksline{ border-image: none; margin: 0 auto 0px; width: 96%; height:220px; padding:20px 20px 20px 0; border-width: 1px 1px medium; border-style: solid solid none; border-colo ...

Steps to Create an HTML Text Box that cannot be clicked

Does anyone know of a way to prevent a text box from being clicked without disabling it or blocking mouse hover events? I can't disable the text box because that would interfere with my jQuery tool tips, and blocking mouse hover events is not an opti ...

Angular problem arises when attempting to map an array and selectively push objects into another array based on a specific condition

Setting up a cashier screen and needing an addToCart function seems pretty simple, right? However, I am encountering a strange logical error. When I click on an item to add it to the cart, my function checks if the item already exists in the array. If it d ...

Creating specialized paths for API - URL handlers to manage nested resources

When working with two resources, employees and employee groups, I aim to create a structured URL format as follows: GET /employees List employees. GET /employees/123 Get employee 123. GET /employees/groups List employee groups. GET /employees/groups/123 ...

Converting units to rem dynamically in CSS: a comprehensive guide

Hey there, I'm currently trying to dynamically convert units into rem in CSS and facing some issues. I have set the root font-size as 23px The current font-size is 16px The expected result should be 16 / 23 => 0.695rem Question: I am looking for ...

Having trouble setting the backgroundImage in React?

Hi there! I'm in the process of crafting my portfolio website. My goal is to have a captivating background image on the main page, and once users navigate to other sections of the portfolio, I'd like the background to switch to a solid color. Alt ...

Adjust the Navbar to be Aligned Completely to the Left and Divide it into 12

I need my navbar to be split into 12 sections so that each item occupies one section, starting from the far left of the screen. The current alignment doesn't meet this requirement as shown in the image below; https://i.sstatic.net/irYqV.png Despite ...

KeyBy lodash method stores values in an object using the specified property as keys

There are multiple items stored in an array: "objects": [ { "category": "XXXXX", "item_name": "over_pkg_0", "price": 230 }, { "category": "XXXXX", "item_name": "over_pkg_1", "price": 54 }, ...

The block tag on line 8 is invalid: 'endblock'. Have you perhaps overlooked registering or loading this tag?

As a newcomer to Django, I have been learning from various Youtube tutorials. Even though I followed the steps exactly, I encountered a block tag error in my code. Here is an excerpt from my base.html template: <head> <meta charset="UTF-8"& ...

What sets apart jQuery.ajax's dataType="json" from using JSON.parse() for parsing JSON data?

What is the difference between using dataType='json' and parsing response with JSON.parse(response) in jQuery Ajax? $.ajax({ url: path, type: 'POST', dataType: 'json', data: { block ...

Managing JSON communications in Scala Play Framework and forwarding them to AngularJS JavaScript

Working on the implementation of a library system using Play Framework and AngularJS. To search for a book in the library, the user enters a keyword value in the input field. This value is received by the controller from a GET request. The task is to searc ...

Shrink image sizes using PHP

Currently I am trying to find a way to decrease the sizes of images using PHP when the page loads. Despite obtaining the dimensions, I am uncertain about how to proceed with reducing their sizes in PHP. Below is my existing code: <?php $stmt = $db-> ...

Symfony/AngularJS Blocked Cross-Origin Request

I am currently encountering an issue while attempting to retrieve data using Angular from my Symfony API, which returns JSON: "Cross-Origin Request Blocked: The Same Origin Policy prohibits reading the remote resource at http://localhost:8000/custom ...

The Three.js GLSL shader encountered a compilation error

I encountered a compile error message: THREE.WebGLShader: Shader could not compile. I attempted to use shaders from shaderfrog.com, but unfortunately they did not compile correctly. To troubleshoot, I added my new vertex and fragment shaders to the DOM a ...

Issue encountered while attempting to include a background image in React JS

I encountered an issue when attempting to include a background image in react js. ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css) Unable to locate module: An attem ...

When working with THREE.js in Electron, web development tools seem to vanish into thin air

Exploring electron is fairly new to me (if you know of any good documentation, please leave it in the comments) and I've encountered an issue that has left me puzzled: Everything seems fine until I load the THREE.js library. At that point, even thoug ...

How to implement PayPal integration in PHP

I am currently working on integrating the paypal payment system into a website dedicated to pet adoption. Initially, I had a basic code structure that was functional. However, after making some modifications and additions to the code, it no longer redirect ...

Implementing an unordered list in an inline format, even when it is collapsed with Bootstrap

Recently, I've been delving into Bootstrap and experimenting with coding a basic website. Below is the code for the navbar: <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class ...