CODEWITHSUNDEEP
cssjquery-uijquery-ui-autocomplete
eyalewin
eyalewin

Reputation: 360

jQuery UI Autocomplete open position

I don't even know how to describe the problem, I'm using jQuery UI Autocomplete on my webapp, and for some reason when i enter input for the first time the page is loaded, the ui-widget-content opens in a wrong position, as seen in my following images. I assume it's an CSS issue, but can't resolve which property should it be. on both images, i use the same exact control. after focus out and returning to the text box, it resolves it self at the right position (on both examples)

The position is a little left of the text box

The position is around 100px at the bottom of the text box

UPDATE

After another look at the development tool, i saw the difference. on the first example, when i first open the ui-autocomplete the "left" property is filled with the value 524.5px, and the second time with 533px (then it shows in the correct position).

on the second example it's the same but with the "top" property, -140px and 199px (this control is within dialog). those properties are on the element.style (i believe it's automatic when the control is created)

i believe the px mentioned are representing the offset of the autocomplete text box in the body, but how can i fix it in the first running time to be the correct px ?

**** Happens only on chrome browser ****

my code for creating the control is:

$('#service').autocomplete({
        source: function (request, response) {

        },
        select: function (event, ui) {
            event.preventDefault();
            $(this).val(ui.item.label);
        },
        minLength: 2,
    }).data("ui-autocomplete")._renderItem = function (ul, item) {
        var $a = $("<a></a>").text(item.label);
        highlightText(this.term, $a); //THE HIGHLIGHT TEXT FUNCTION I USE
        return $("<li></li>").append($a).appendTo(ul);
    };

Upvotes: 2

Views: 1807

Answers (3)

Vaidas
Vaidas

Reputation: 1503

It is a jQueryUI bug. It's fixed in the 1.9.1 version, but if you must use an old version, just apply this to your CSS:

.ui-autocomplete {
    position: absolute;
    top: 0;
    cursor: default;
}

Upvotes: 2

eyalewin
eyalewin

Reputation: 360

Well, after reading jQuery bug ticket about this exact problem, i looked again at my CSS class and found that i have overridden the property "top" with 100% value. removed it and it fixed the problem :) :)

Upvotes: 1

daan.desmedt
daan.desmedt

Reputation: 3820

It's hard to come up with a fix if there is no clear vision on the problem. It probably would be a CSS issue. Try to find the problem using some Developer Tool to inspect the HTML / CSS code.

For Chrome : https://developer.chrome.com/devtools

Upvotes: 0

Related Questions