Frinavale Frinavale - 1 month ago 27
CSS Question

Chrome DevTools not working with the Select element

I am working on fixing a style sheet for mobile devices for a website and I am using the DevTools that come built into Chrome for testing purposes. I am using Chrome version 53.0.2785.116 on a Windows operating system right now.

My problem is that, when I'm using the DevTools, the

<select>
elements' expanded section (the part that normally drop's down) is completely off center and appears as a black box.

At first I thought it was something wrong in the style, but I created new .html file and simply added a
<select>
element to the page and have found the same thing.

I realize that on the actual device the drop down section is displayed differently (as a section at the bottom of the device with the options in a Rolodex type animation); however, I am unable to use the select menu for testing purposes...

Is there any way around this problem?

Here is my code:

<!DOCTYPE html>
<html>
<title></title>
<head>
</head>
<body>
<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
<option>e</option>
</select>
</body>
</html>


Here is a screenshot of the problem: enter image description here

Answer

For testing purposes you can change the device type from mobile to desktop(touch). This will allow you to get around the issue with the select element and mobile emulation.

To enable these options click on the 3 dots to the right of the rotate icon (menu icon below chromes top right)

  • Select Show device type and Show device pixel ratio
  • Select Responsive from the first dropdown and input your other device values

To save having to do this all the time you can create a custom device profile

  • In the first dropdown select Edit then Add Custom Device

enter image description here

enter image description here

EDIT: For Chrome version 53.0.2785.143 for Windows, these are the steps you would take to accomplish adding a custom device type:

  1. Navigate to the page you want to test and open the developer tools by hitting F12 enter image description here
  2. Hit F1 to open the developer tools settings enter image description here
  3. Select devices in the settings menu
  4. Add a custom device with the same configuration details as the device you want to test and do as described above.
Comments