Show typeahead dropdown on table-responsive

Question

Show typeahead dropdown on table-responsive

Navigation

#1 by (2 votes)

1

This is the code I have. The problem is that the dropdown of the typeahead plugin is hidden in the div that has the table-responsive class. Can somebody help me? Thank you in advance.

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="">

        <title>bootstrap 3 typeahead</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      </head>
      <body>
        <div class="container">
          <div class="row">
          <div class="table-responsive" style="max-height: 366px; overflow-y: auto;">
            <table class="table table-hover table-condensed">
              <tr>
                <td>
                  <div class="form-group">
                    <div class="input-group">
                      <input class="form-control" id="my_input" placeholder="Texto" type="text" autocomplete="off">
                      <span class="input-group-btn">
                        <button id="btnCstarCtes" type="button" class="btn btn-success" title="Seleccionar">
                          <span class="" aria-hidden="true">$</span>
                        </button>
                      </span>
                    </div>
                  </div>
                </td>
                <td>algo</td>
              </tr>
            </table>
            </div>
          </div>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="bootstrap3-typeahead.js"></script>
        <script type="text/javascript">
          $(document).ready(function() {
            $('#my_input').typeahead({
              source: ['uno','dos','tres','cuatro','cinco','seis','siete','ocho','nueve'],
              fitToElement: true,
            });
          });
        </script>
      </body>
    </html>

html bootstrap

asked by Antonio Perez 06.09.2016 в 08:34

source

1 answer

Select within Select in SQL query with VB.net Problems in chrome with overlapping divs using z-index and position: absolute

score 2 · Answer 1

I have found a solution, there is an option ( appendTo ) for the dropdown to be displayed in the element you choose, if that element is outside the div .table-responsive does not affect the overflow and will be displayed. I have adjusted the position for this example but for other cases we should review it:

$('#my_input').typeahead({
  source: ['uno', 'dos', 'tres', 'cuatro', 'cinco', 'seis', 'siete', 'ocho', 'nueve'],
  fitToElement: true,
  appendTo: externo
});

#externo{
  position:absolute;
  left:5px;
  top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="table-responsive" style="max-height: 366px; overflow-y: auto;">
      <table class="table table-hover table-condensed">
        <tr>
          <td>
            <div class="form-group">
              <div class="input-group">
                <input class="form-control" id="my_input" placeholder="Texto" type="text" autocomplete="off">
                <span class="input-group-btn">
                        <button id="btnCstarCtes" type="button" class="btn btn-success" title="Seleccionar">
                          <span class="" aria-hidden="true">$</span>
                </button>
                </span>
              </div>
            </div>
          </td>
          <td>algo</td>
        </tr>
      </table>
    </div>
  </div>
</div>
<div id="externo"></div>