CODEWITHSUNDEEP
htmlcss
Frinavale
Frinavale

Reputation: 3950

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

Upvotes: 4

Views: 5966

Answers (1)

Bosc
Bosc

Reputation: 1509

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 open your developer tools by righting and inspecting the page you are on or press f12. Click on the menu icon (3 dots) to the right of the rotate icon (menu icon below chromes top right) - Edit: see image dots circled in red.

  • 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
  • Note: Edit will only appear if you have already created a custom device type, see the Edit below for how to create a custom device for the first time.

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.

Upvotes: 3

Related Questions