jQuery UI Combobox issues
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css">
<script src="http://mjf.me/Random/jquery-ui-combobox.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<div class="container">
<div class="body">
<div class="controlContainer">
<div class="subControl>
<div class="control">
<div style="float: left; padding-top: 3px;">TYPE</div>
<div id="typeBox" style="text-align: right;">
<select class="combobox">
<option value="">Select one...</option>
<option value="23">Really long stuff that might wrap</option>
<option value="25">Normal Stuff</option>
<option value="31">my service (Awesome)</option>
<option value="38">Test 7</option>
<option value="40">My Service 2</option>
<option value="41">Here is something pretty big again</option>
<option value="42">Why isn't there a max width property on this</option>
<option value="43">Transfer</option>
<option value="44">There has to be a lot of items to illustrate this problem</option>
<option value="46">Test 8</option>
<option value="47">Test 9</option>
<option value="48">TEST TEST TEST</option>
<option value="70">Test 11</option>
<option value="72">Test 12</option>
<option value="73">Test 13</option>
<option value="74">Test 14</option>
...
CSS
body {margin: 0px; padding: 0px;}
.container
{
position: relative;
float: right;
}
.body {
width: 232px;
position: absolute;
top: 30px;
right: 0px;
border: 1px solid #231F20;
border-radius: 10px;
background: #ADAFB2;
color: #58595B;
font-family: 'Ubuntu', sans-serif;
}
.controlContainer {
font-weight: bolder;
font-size: 15px;
}
.subControl {
margin-top: 5px;
border-top: 2px solid #DCDDDE;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-bottom: 5px;
}
.control {
margin: 10px auto;
max-width: 215px;
}
.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; }
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; width: 140px; }
ul.ui-widget {font-size: 0.7em;}
input.ui-widget {font-size: 0.7em;}
button.ui-widget {font-size: 0.7em;}
.ui-menu { max-height: 200px; overflow-y: auto;}
JavaScript
$(".combobox").combobox();