Having trouble with a basic select tag and options not functioning properly in Chrome browser

I encountered an issue where I am unable to expand a simple select tag in Chrome.

<select id="filterCategory" class="">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Steps to replicate the issue:

  1. Execute the code snippet above (in Chrome),
  2. Open Developer Tools (F12),
  3. Toggle mobile device mode (Default shortcut is Ctrl + Shift + M)

I am using Chrome Version 53.0.2785.116 (64-bit) on Ubuntu.

This problem only occurs in Chrome, it works fine on other browsers and mobile native browsers.

Question: Is there any temporary solution for this issue?

Edit: The issue becomes more severe if I use position fixed as its container and the form-control class from Bootstrap. The options are pushed out of the visible area in Chrome.

javascripthtmlcssgoogle-chrome

Answer №1

There's no need to be concerned about the mobile-device, as the appearance of the select-menu will resemble something like this,

When it comes to debugging, you have the option to utilize the down and up arrow keys for selecting menu options until chrome resolves this issue.

Answer №2

Although it may seem like a crude and lengthy workaround, this method has its advantages as it allows for customized styling of menus:

$('select').each(function() {
  // setting up the list
  var $this = $(this),
    $class = $this.attr('class') + ' sel',
    $id = $this.attr('id'),
    list = '',
    opts = '',
    start = '';
  $this.hide();
  $('option', this).each(function(i) {
    var content = $(this).text();
    if (i === 0) {
      start = '<div >' + content + '</div>';
    }
    opts += '<li data-id="' + $id + '">' + content + '</li>';
  });
  list = '<ul >' + opts + '</ul>';
  $this.after('<div class="' + $class + '" >' + start + list + '</div>');
});

// handling click events
$('.sel').on('click', function(e) {
  $('ul', this).fadeIn('fast');
  $('ul', this).on('mouseleave', function() {
    $(this).fadeOut('slow');
  });
});

// assigning value to original selector on input
$('.sel ul li').on('click', function(e) {
  e.preventDefault();
  $('.sel ul').fadeOut('fast');
  var $this = $(this),
    target = $this.data('id'),
    num = $this.text();
  $('select#' + target).val(num).change(); // triggers the hidden selector
  $this.parent().siblings().text($this.text());
  return false;
});



// for testing purposes only
$('select').on('change', function() {
  $("#monitor").text(this.value); // or $(this).val()
});
.sel {
  width: 3em;
  background: #fff;
  cursor: pointer;
  text-align: center;
  border: 1px solid #09f;
}

.sel ul {
  display: none;
  position: relative;
  left: 0em;
  top: -1em;
  width: 3em;
  margin: 0em;
  padding: 0em;
  cursor: pointer;
  background: #fff;
  text-align: center;
  list-style-type: none;
}

.sel ul li:hover {
  background: #bbb;
}

#monitor {
  position: fixed;
  left: 3em;
  width: 3em;
  height: 1em;
  bottom: 4em;
  background: #09f;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="filterCategory" class="">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>


<div id='monitor'>test</div>

Answer №3

  • There seems to be a problem with the Chrome or Chromium version.
  • Even though the issue persists in developer mode, the select option will work fine on @mobileDevice
  • This affects any element that displays a drop-down, data-picker, or select-option
  • Consider reinstalling the Chrome Version to fix the issue.
  • The problem with developer mode should be sorted out.

Answer №4

create a new div specifically for users accessing the platform via Chrome and Chromium browsers, ensuring that they have the data-tap-disabled attribute included in the following manner:

<div data-tap-disabled="true">
  <select>
  </select>
</div>

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

Completing the regex properly

When using my editor, I am able to paste a video URL which is then converted by regex into an embed code. The URL in the WYSIWYG-editor looks like this: Once converted, the output HTML appears as: <p>http://emedia.is.ed.ac.uk:8080/JW/wsconfig.xml& ...

javascriptjqueryregex

Creating an HTTP request inside an Export Function in a MEANJS application

Initially, I utilized the Yo MeanJs generator to kickstart my project. As a newcomer in the world of MeanJs, things are starting to look quite complex for me. Currently, my MeanJs application is supposed to retrieve data from an HTTP request but, unfortun ...

javascriptnode.jsmeanjs

Accessing a child component's method within a parent component by making a call to it

I am facing an issue where I need to invoke a method in a child component from its parent component. Here is the specific scenario: Parent Component Example // ParentComponent.js class ParentComponent extends Component { render() { ret ...

javascriptreactjs

"Learn how to easily send media files stored on your local server via WhatsApp using Twilio with Node.js and Express

Whenever I attempt to send the PDF file created through WhatsApp, an error pops up preventing me from viewing it. easyinvoice.createInvoice(data, function(result) { //The response will contain a base64 encoded PDF file ...

javascriptnode.jsexpresstwiliotwilio-api

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue? View my website here: <div id="menu_wrapper"> <div id="menu"> &l ...

htmlcss

The function screen.getByText is not available in this context

My experience with jest and react-testing-library has been smooth for the most part, but I encountered some challenges when transitioning to the screen > getByText/etc testing method. Test describe('test the dashboard when loaded', () => { ...

javascripttypescriptjestjsreact-testing-library

Get all the classes from the body element of the AJAX-loaded page and update the body classes on the current page with them

I am currently in the process of AJAX-ing a WordPress theme with a persistent music player. In Wordpress, dynamic classes are used on the <body> tag. The structure I'm working with looks like this: <html> <head> </head> ...

javascriptjqueryajaxwordpress

When using Vue3 along with Axios.post, the data is being serialized incorrectly

Goal: I need to send the data {"username": myuser, "password": mypswd} to an API endpoint in order to receive a token for further communication with the API. The following code snippets attempt to achieve this: // Attempt # 1 let re ...

javascriptvue.jsaxios

Developing uniform resource locators with jQuery

As I work on developing my webapp, I have made use of the tag in my JSPs to ensure that all links within the application - whether they lead to pages or resources like images and CSS - always stem from the root directory rather than being relative to the ...

javascriptjqueryurl

Tips on utilizing recursive Promises within a loop while transferring arguments to another function

Despite searching other threads on SO, I couldn't find a satisfactory answer to my problem. Every solution seems to be missing something essential for my case, especially since none of them address Apple Music specifically. The Apple API relies heavil ...

javascriptnode.jses6-promiseapple-musickit-js

Using nightwatch.js to verify elements across different parts of a webpage

Currently engaged in working with nightwatch.js and encountering an issue with a particular page file structure: sections: { table: { selector: '.sr-filterable-data-layout--collection', elements: { header: { ...

javascriptseleniumnightwatch.js

Ways to verify if a web URL is contained within an HTML textbox

In the process of developing a frontend form for WordPress, I have incorporated a basic HTML textbox for users to input a web URL. My goal now is to ensure that the entered value is indeed a valid URL and not just arbitrary text. Is there a way to perfor ...

phphtmlwordpressforms

Extract data from a JSON-encoded array using JavaScript

I sent a JSON encoded array to JavaScript. Now I want to access that array to retrieve the different elements. When I print it out using console.log(), I see this array: array(1) { [16]=> array(2) { [3488]=> array(1) { [0]=> ...

phpjavascriptarraysjson

Customizing Bootstrap Navigation: Creating Space Between Menu Items

I've configured my Bootstrap navigation with a dropdown toggle for "Coverage". I'm looking to decrease the spacing between each list item (li) under this dropdown. What CSS setting should I use to achieve this? Interestingly, when I apply float: ...

csshtmltwitter-bootstrap

Achieving perfect alignment of an image within a Twitter Bootstrap cell when the height of the cell is uncertain

I have a bootstrap grid and I am attempting to center an image (200x100 as shown in the provided example) within a cell. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html& ...

csstwitter-bootstrap

Requesting data asynchronously using AJAX and displaying the filtered results on a webpage using JSON

When I send a request to my node.js server for a .json file containing person information (first name, last name), I want the data to be filtered based on user input. For example: When I request the .json file from the server, it gives me a list of people ...

javascripthtmljsonnode.js

Implementing SweetAlert2 in Vue.js to create a modal prompt for confirmation prior to deleting an item

I'm encountering an issue with sweetalert2 while using Laravel Vue for my app development. My goal is to have a confirmation modal pop-up when deleting a row from the database. However, whenever I click "Yes", the item is successfully removed. But if ...

javascriptvue.jssweetalert

Transmitting HTML and CSS code to the server for seamless conversion into a PDF file

I recently started using a tool called GemBoxDocument that allows me to convert HTML files into PDFs. Their website provides sample code demonstrating how to convert an existing file on a server (source): using System; using System.Linq; using System.Tex ...

c#htmlajax

Looping through objects and updating state based on a filter condition

Within my React state, there exists an array of objects similar to the following: timers: { id:"-LL-YVYNC_BGirSn1Ydu" title: "Project Title" project: "Project Name", elapsed: 0, runningSince: 0, }, { id:"-LL-YVYNC_BGirSn1Ydu-2", ...

javascriptreactjsecmascript-6

Exploring the use of a customizable decorator in Typescript for improved typing

Currently, I am in the process of creating TypeScript typings for a JavaScript library. One specific requirement is to define an optional callable decorator: @model class User {} @model() class User {} @model('User') class User {} I attempted ...

javascripttypescriptdecoratortypescript-typings