How to make an autocomplete plugins dropdown floats over bootstraps modal box?

Question

I am using jquerys autocomplete plugin to search over a list. In the base of every page autocomplete floats over the page regular. But when i put searchbox in a bootstrap modal dialog box autocomplete dropdown stays at the back and couldn't be displayed. How can i stabilize it on the modal box.

/* the modal caller*/
$('#bizimMesajci').modal();

/* autocomplete plugin codes */
$('#' + nesneID).autocomplete({
    source: function (request, response) {
        response([{
            label: "Aranıyor...",
            loading: true
        }]);
        $.ajax({
            url: "evrak_action.php",
            data: {
                isTipi: 'kurumListesi',
                jsonMU: 'evet',
                arananKurum: $('#' + nesneID).val()
            },
            dataType: "json",
            type: "POST",
            success: function (data) {
                //=========================================================<
                response($.map(data, function (item) {

                    return {
                        label: item.label,
                        value: item.label,
                        kID: item.kID
                    }
                }));
                //=========================================================<

            },

        });
    },
    select: function (event, ui) {
        $('#' + nesneIDnum).val(ui.item.kID);
        $('#' + nesneID).val(ui.item.label);
        //console.log($("#evrakKurumID").val());
        return false;
    },
    focus: function (event, ui) {
        return false;
    },
    minLength: 3
});

http://jsfiddle.net/7zNBH

Assuming the dropdown is `position: absolute` you can set its `z-index` in CSS to something higher than that of the modal. — Rory McCrossan, May 14 '14 at 06:51
I dont know how to set autocomplete dropdowns z-index. Is there a known object id of it? I can get modalbox z-index. — caglaror, May 14 '14 at 06:55
Yes you are right. I just read. But the max was 32 bit + number is the limit. I tried z-index and the solution given here (http://stackoverflow.com/questions/19917026/bootstrap-modal-z-index) but got no solution yet. — caglaror, May 14 '14 at 07:25
OK. Is there any body knows how to change z-index attribute of autocomplete plugins all elements? — caglaror, May 14 '14 at 07:31
That solved my problem. Also the same fixing caused problems. http://api.jqueryui.com/autocomplete/#option-appendTo — caglaror, May 14 '14 at 07:47
First hint gets here: http://stackoverflow.com/questions/16133654/autocomplete-issue-into-bootstrap-modal — caglaror, May 14 '14 at 07:47

score 0 · Answer 1 · answered May 14 '14 at 07:50

0

Just add an optional parameters to autocomplete plugins caller function as described here: http://api.jqueryui.com/autocomplete/#option-appendTo solves my problem.

answered May 14 '14 at 07:50

caglaror

459
1
13
28

How to make an autocomplete plugins dropdown floats over bootstraps modal box?

1 Answers1