I ran to this problem where I am unable to expand this simple select tag on my chrome.

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

I ran to this problem where I am unable to expand this simple select tag on my chrome.

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

Steps to reproduce:

1. Run code snippet above (on Chrome),
2. Go for Developers Mode (F12),
3. Toggle mobile device mode (By default is Ctrl + Shift + M)

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

This works fine in any other browser or mobile native browsers, it's just for Chrome.

Question: Any temporary workaround for this?

Edit: This behavior is worsen if I use position fixed as its container and form-control class from bootstrap. The option is out of the chrome window with invisible options.

• javascript
• html
• css
• google-chrome

• 3 i think its chrome problem. may be.. – vas Commented Sep 22, 2016 at 9:40
• 1 @Chetan but not working for me. only on the developer mode – vas Commented Sep 22, 2016 at 9:44
• 3 yep, its a chrome device mode issue, facing it since last update whereas in Android device native chrome, its working perfectly fine. – vivekkupadhyay Commented Sep 22, 2016 at 9:45
• 1 @vas - yes it is not working in developer mode. – Chetan Commented Sep 22, 2016 at 9:48
• 2 Looks like its chromium bug. Someone has actually reported it here – choz Commented Sep 22, 2016 at 10:35

4 Answers 4

You don't have to worry about mobile-device, the select-menu will look something like this,

and for debugging you can use down and up arrow key to select menu options until chrome fix this issue.

crude long winded workaround, but on the upside allows you to style customised menus:

$('select').each(function() {
  // set 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>');
});

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

// registers the input to the original selector
$('.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;
});



// test 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./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>

• Issue exist with chromeor chromium version.
• Even if issue exist in developer mode, it select option will fine in @mobileDevice
• Affects anything that renders a dropDown, data-picker, select-option
• Try Reinstalling the Chrome Version.
• Issue with developer mode will be resolved.

add a div for chrome and chromium browser with data-tap-disabled attribute like this :

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