Geek Answers Handbook

Problem with <select> scroll position in Chrome

I am currently using Chrome 42.0.2311.135 m, IE 11 and Firefox 37, and I am having a slight cosmetic issue with the item <select>in Chrome.

Default in Chrome

This screenshot shows <select>what is displayed in Chrome. I use jQuery to set the value <select>to the value of the first parameter.

Default in IE11

This screenshot shows the same page in IE11. The problem is that Chrome scrolls a bit, so the indentation is not visible. If I go to the top of the list, it will look like this.

Chrome scrolled to top

If the value is <select>not set, Chrome is displayed with the top filling (i.e., the scroll bar is in the upper right).

How can I select a value and have a top pad in Chrome?

The CSS that I apply to <select>is pretty simple.

.home .desktop-header form select.make, .home .desktop-header form select.model {
    width: 27%;
    margin-right: 20px;
    padding: 10px;
}

I set the value using:

cfg.makesList.element.val(cfg.makesList.element.find("option")[0].value).change();

A change event is connected to retrieve list parameters for a list of models.

In the list “Makes” shows the 10 most popular options at the top of the list (and also includes them in alphabetical order in the full list), therefore it <select>has 10 options, the value of which exists twice in the list. (see http://jsfiddle.net/0ftL6w3y/2/ for an example)

+4
source share
2 answers

Try this code ::

Do this by scrolling up using this code:

$('select').scrollTop(0);

JSFIDDLE DEMO

+2
source

I'm not sure how you have your HTML codes and other styles, including placing content on the page. Here I tried to achieve what you want in the following.

.

<html>
<head>
<style>
.select-menu {border: 1px solid #e6e6e6;height: 90px;margin: 10px;padding: 10px;width: 90px;}
.select-menu > select {width: 85px;}
</style>
</head>
<body>
<div class="select-menu">
<select size="5">
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>Four</option>
<option>Five</option>
</select>
</div>
</body>
</html>
0

More articles:


All Articles