R.Anandan
R.Anandan

Reputation: 342

Design issues in chrome device mode

This is the code I am using in chrome device mode select option list overflow the device width I don't no its coming in real devices and also I enclose my screenshot here enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Form control: select</h2>
  <p>The form below contains two dropdown menus (select lists):</p>
  <form role="form">
    <div class="form-group">
      <label for="sel1">Select list (select one):</label>
      <select class="form-control" id="sel1">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
      </select>
      <br>

    </div>
  </form>
</div>

</body>
</html>

Upvotes: 1

Views: 115

Answers (2)

Mukul Kant
Mukul Kant

Reputation: 7122

No, this will shown in your device. Option list item overflow this is because of OS (window). If you test this in other browser. It will perform diffident with default property (means if you don't customize with css or js).

And if you see this on android it will be okay and on iPhone then it will show with iphone default option box.

enter image description here

Upvotes: 1

Lee
Lee

Reputation: 4323

You didn't actually ask a question of any kind, just stating a fact of what Chrome does... I'm not sure how that fits in with this site, but anyway:

There's nothing wrong with your code, this is how the design mode behaves, in order to show the full length of options inside your dropdown.

On a real device, this will display either natively in iOS, or to the viewport width.

Upvotes: 0

Related Questions