Jquery autocomplete styling

Question

While using Jquery autocomplete, in particular after the list of recommended terms is being outputed, if you change the size of your browser's window, the whole position of the list is shifted in oposite direction in which the change is being performed. Is there a way to avoid this from happening?

JS file:

function autocomplet() {
    $("input#ui-autocomplete-input").autocomplete({
        minLength: 2,
        source: '/store.json',
        focus: function(event, ui){
            $("input#ui-autocomplete-input").val(ui.item.product.name);
            return false;
        },
        select: function(event, ui){
            $("input#ui-autocomplete-input").val(ui.item.product.name);
            $("input#ui-autocomplete-input").val(ui.item.product.name);
            return false;
        }
        //      source: '<%= products_path(:json) %>'
        //      source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
    }).data("autocomplete")._renderItem = function(ul, item){
        return $("<li></li>").data("item.autocomplete", item).append("<a>"+item.product.name+"</a>").appendTo(ul);
    }
};

$(document).ready(autocomplet);

CSS file:

body {
    font-size: 62.5%;
}

table {
    font-size: 1em;
}

tr:first-child{
    font-size: 4em;
    font-weight: bold;
}

td{
    width: 100px;
    height: 30px;
}

/* Site
-------------------------------- */

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}

/* Normal
-------------------------------- */

.normal h3,
.normal h4 {
    margin: 0;
    font-weight: normal;
}

.normal h3 {
    padding: 0 0 9px;
    font-size: 1.8em;
}

.normal h4 {
    padding-bottom: 21px;
    border-bottom: 1px dashed #999;
    font-size: 1.2em;
    font-weight: bold;
}

.normal p {
    font-size: 1.2em;
}

ul { 
    list-style: none; 
    border:none;
}



/* Misc visuals
----------------------------------*/

/* Search textbox*/

fieldset.search{
    border:none;
    width: 285px;
}

.search input.btn:hover{
    background: #FFFFFF no-repeat left;
}

.search input.btn{
    border:none;
    font-size: 1.2em;
    width: 50px;
    height: 40px;
    cursor: pointer;
    background: #fbc900;
}

.search input.box{
    border-top:5px solid #fff;
    border-bottom:5px solid #fff;
    border-left:0px;
    color: #fff;
    font-size: 1.2em;
    width: 190px;
    height: 38px;
    text-indent:8px;
    background: #D63737;
}

.search input.box:focus{
    outline-width:0;
}

.search button.btn:hover{
    background: #fbc900 no-repeat bottom right;
}
/* Corner radius */
.ui-state-focus, .ui-widget-content, .ui-state-focus, .ui-widget-header, .ui-state-focus {
    background: #DADADA;
    color: #212121;
    cursor: pointer;
    width:206px;
}

.ui-corner-all {
    position:relative;
    background-color: #213216; 
    width: 206px;
}


.ui-active-menuitem, .ui-state-hover, .ui-state-highlight{
    height: 38px;
    background:#D63737;
    cursor:pointer;
    width: 206px;

}

.ui-menu-item{
    font-size: 1em;
    text-indent:9px;
    height:38px;
    width:206px;
}

Answer 1

You just find the bellow code at jquery.gui.css

.ui-menu .ui-menu-item { margin:0; padding: 0; zoom: 0; float: left; clear: left; width: 100%; }

and change your font size here.. like "font-size:12px"

Answer 2

You may also want to use this :

.ui-autocomplete
{
max-height: 300px !important;
}

to limit the size of the result popup