CODEWITHSUNDEEP
javascriptjquerycssasp.net-mvchtml
SantyEssac
SantyEssac

Reputation: 809

Autocomplete appears far below the textbox

I have created a page in MVC Razor which includes one textbox, and which has autocomplete functionality. My problem is that the autocomplete results appear far below the textbox the first time it is used (as shown in this picture), but subsequently appears in the correct place (i.e., exactly below the textbox). Why this is happening?

My CSS is as follows:

.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2000;
    float: left;
    display: block;
    min-width: 160px;
    _width: 160px;
    padding: 0px 0;
    margin: 2px 0 0 0;
    list-style: none outside none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
}

And my HTML is as follows:

<input class="contentPicker input-xxlarge ui-autocomplete-input valid"
    id="Content" name="Content" placeholder="Select a content"
    type="text" value="" autocomplete="off">

Upvotes: 0

Views: 1291

Answers (1)

Dogoku
Dogoku

Reputation: 4675

You should not overwrite any positioning css from jquery ui. Of course it's gonna make things behave weird.

The first time the list is showing, is reading your css, but subsequent searches are probably overwriting your css with inline styles

jquery-ui is a plug and play solution, if you include the jquery-ui css files in your page, you shouldn't need to do anything. They have a very advanced theme roller, that takes care of all styling for you, so you don't have to mess with it

Upvotes: 1

Related Questions