Swim89 Swim89 - 10 months ago 69
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">
<table id="dettaglioDocumento" class="table table-condensed table-fixed" cellspacing="0" width="100%">
<col width="50px">
<col width="350px">
<td><label class="align-table">Descrizione</label></td>
<td><img src="<?= $root; ?>/assets/img/details_close.png" class="link removeRow"></td>
<input name="txtDescrizione[]" data-target=".container-fluid" class="form-control selectDescrizione" data-provide="typeahead" autocomplete="off" name="txtDescrizione_0" type="text" placeholder="" value="">

Here JS Code:

minLength: 3,
items: 5,
delay: 400,
source: function (query, response) {
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

JSFiddle code

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