Typeahead 3 inside div overflow-x

Question

I have a div with class 'table-responsive' that has overflow-x setted to 'auto'.

Inside this div there is an input text with typeahead. When I found results to return into typeahead, is inside the div. How can I exit it?

Here my code:

<div class="table-responsive">
    <fieldset>
        <legend>Righe</legend>
        <table id="dettaglioDocumento" class="table table-condensed table-fixed" cellspacing="0" width="100%">
        <col width="50px">
        <col width="350px">
            <thead>
                <tr>
                    <td></td>
                    <td><label class="align-table">Descrizione</label></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><img src="<?= $root; ?>/assets/img/details_close.png" class="link removeRow"></td>
                    <td>
                        <input name="txtDescrizione[]" data-target=".container-fluid" class="form-control selectDescrizione" data-provide="typeahead" autocomplete="off" name="txtDescrizione_0" type="text" placeholder="" value="">
                    </td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</div>

Here JS Code:

    $('.selectDescrizione').typeahead({
        minLength: 3,
        items: 5,
        delay: 400,
        source: function (query, response) {
            $.ajax({
                url: '<?= $root; ?>/get_listino',
                dataType: "json",
                type: 'POST',
                data: {
                    query: query
                },
                success: function (data) {
                    return response(data.listino);
                }
            });
        },
        displayText: function (item) {
            return item.testo;
        }
    });

Here the pic:

UPDATE JSFiddle code

Answer 1

• An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent, which means it bubbles up the DOM until it finds a relative context to apply the positioning.
• If no relative parent is found it will then reach the highest possible « container », which is the browser window, aka the viewport (or the document maybe, or the window … ? hey you know what, I'm not a W3C expert ok!).

Now You just need to set position static to relative element

In your case:

.dataTables_wrapper {
    position: static;
    clear: both;
    zoom: 1;
}

Updated fiddle

Source