JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="input" />
<br/>
<br/>
<br/>
<br/>vvv
v<br/><br/><br/>v
v
vv
CSS
.auto_dropdown_box {
position: absolute;
display: block;
height: 180px;
/*width: 200px;*/
background: #FFF;
border: 1px solid rgba(82, 168, 236, 0.8);
font-weight: normal;
-webkit-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
-ms-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
-o-box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
box-shadow: 0px 1px 10px 1px rgba(50, 50, 50, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.auto_dropdown_box ul {
position: relative;
height: 180px;
margin: 0 0 0 0;
padding: 0 0 0 0;
overflow-y: scroll;
overflow-x: hidden;
}
.auto_dropdown_box ul li:after { content: ""; clear: both; }
/*.auto_dropdown_box ul::-webkit-scrollbar {
overflow: hidden;
width: 6px;
background: #fafafa;
}
.auto_dropdown_box ul::-webkit-scrollbar:horizontal { height: 1px; }
.auto_dropdown_box ul::-webkit-scrollbar-button { display: none; }
.auto_dropdown_box ul::-webkit-scrollbar-piece { background: #eee; }
.auto_dropdown_box ul::-webkit-scrollbar-piece:start { background: #eee; }
.auto_dropdown_box ul::-webkit-scrollbar-thumb {
background: #e0e0e0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-o-border-radius: 1px;
border-radius: 1px;
}
.auto_dropdown_box ul::-webkit-scrollbar-corner { background: #333; } */
.auto_dropdown_box .auto_dropdown_box_item {
position: relative;
width: 100%;
height: 30px;
overflow: hidden;
color: #101010;
cursor: pointer;
list-style-type: none;
background-color: #FFFFFF;
padding-left: 10%;
}
.auto_dropdown_box .auto_dropdown_box_item .auto_dropdown_box_item_label {
display: table-cell;
height: 30px;
width: 100%;
...
JavaScript
(function($) {
var states = [
{ "name": "Alabama", "abbreviation": "AL" },
{ "name": "Alaska", "abbreviation": "AK" },
{ "name": "Arizona", "abbreviation": "AZ" },
{ "name": "Arkansas", "abbreviation": "AR" },
{ "name": "California", "abbreviation": "CA" },
{ "name": "Colorado", "abbreviation": "CO" },
{ "name": "Connecticut", "abbreviation": "CT" },
{ "name": "Delaware", "abbreviation": "DE" },
{ "name": "Florida", "abbreviation": "FL" },
{ "name": "Georgia", "abbreviation": "GA" },
{ "name": "Hawaii", "abbreviation": "HI" },
{ "name": "Idaho", "abbreviation": "ID" },
{ "name": "Illinois", "abbreviation": "IL" },
{ "name": "Indiana", "abbreviation": "IN" },
{ "name": "Iowa", "abbreviation": "IA" },
{ "name": "Kansas", "abbreviation": "KS" },
{ "name": "Kentucky", "abbreviation": "KY" },
{ "name": "Louisiana", "abbreviation": "LA" },
{ "name": "Maine", "abbreviation": "ME" },
{ "name": "Maryland", "abbreviation": "MD" }
// ...enough needed for testing this issue
];
var dropdownArray = new Array();
var dropdownSelect = function(obj, options) {
this.parent = $('body'); // parent object
this.input = obj; // input object
this.options = options;
this.dom = null;
this.isVisible = true;
this.items = new Array() // dropdownitem
// initialize
this.id = dropdownArray.length;
this.init();
dropdownArray.push(this);
this.options.dropdownid = this.id;
this.options.holder = function() {
return dropdownArray[this.dropdownid];
};
// append and set event-handler to input
this.addToPage();
};
dropdownSelect.prototype.init = function(container) {
var $container,
$obj = this.input; // input element
if (container == null) {
// container hasn't been created, we need to create it
$container = $('<div/>').addClass('auto_dropdown_box')
.data('dropdownid', this.id);
this.dom =...