Swim89 Swim89 - 1 month ago 15
HTML Question

Typeahead 3 inside div overflow-x

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:
enter image description here

UPDATE
JSFiddle code

Answer
  • 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