CODEWITHSUNDEEP
jquerycsstags
Oskar Persson
Oskar Persson

Reputation: 6765

jQuery/CSS: Making the autocomplete push other divs down?

I'm using the xoxco jQuery tagsystem for tags and their autocompletesystem for the.. wait for it...autocomplete! http://xoxco.com/projects/code/tagsinput/

I then stylize this list by modifying three different classes in CSS:

ui-autocomplete
ui-menu-item
ui-corner-all

Right below this tagwindow i have some other content and my problem is that when the autocomplete list appears below the tag input, the content below doesn't move down which makes the autocomplete appear above that.

ADDED:

Example: http://jsfiddle.net/jQm2C/1/show/ What I want is to place the autocomplete list inside the tags. Or any type of tags that I want to. Especially between div or span tags.

How can I solve this?

ADDED #2:

After some research in jQuery I think I can further explain what I want to do. I want to append the , which is the autocompletelist, to a div. Though I can't figure out how to do it.

Upvotes: 1

Views: 1699

Answers (1)

Oskar Persson
Oskar Persson

Reputation: 6765

Finally fixed it! http://jsfiddle.net/jQm2C/7/show/

What I did was to append the "top class" of the autocomplete list .ui-autocomplete to a div named .test using this jQuery code:

$('.test').append($('.ui-autocomplete'));

Then to style the list I wrote this CSS. For some reason I can't put the CSS in the CSS box without making the thing stop working:

.ui-autocomplete{
    position: static !important;
    float:none !important;
    display:inline-block;
}

Upvotes: 1

Related Questions