Display a dropdown within the page

Question

Display a dropdown within the page

Navigation

#1 by (1 votes)
#2 by (0 votes)

3

I have a table with a dropdown in each row with actions. The problem I have is that in the last rows when pressing the dropdown I have to scrolle the table down to see the options. They do not appear directly to me.

I think it's some configuration of CSS that I can not fix.

My table:

$object = new CRUD();

// Design initial table header
$data = '<div class="table-responsive">
            <table class="table table-bordered table-striped table-condensed">
               <tr>
                   <th >Nombre</th>
                   <th>Apellido</th>
                   <th>Paquete</th>
                   <th>$ Venta</th>
                   <th>$ Emision</th>
                   <th>Vendedor</th>
                   <th>$ Dif</th>
                   <th>Acciones</th>
               </tr>
         </div>';    

$users = $object->Read();

if (count($users) > 0) {
    foreach ($users as $user) {
        $link = $user['link'];


             $data .= '<tr>
                  <td>' . $user['first_name'] . '</td>
                  <td>' . $user['last_name'] . '</td>
                  <td>' . $user['paq'] . '</td>
                  <td>' . $user['pventa'] . '</td>
                  <td>' . $user['pcosto'] . '</td>
                  <td>' . $user['vendedor'] . '</td>
                  <td>' . $user['dif'] . '</td>
                  <td>     
                     <div class="dropdown">
                        <button class="btn btn-success btn-xs dropdown-toggle" type="button" data-toggle="dropdown">Acciones
                          <span class="caret"></span></button>
                          <ul class="dropdown-menu">
                            <li><a href="'. $link .'" target="_blank">Comprobante</a></li>
                            <li class="divider"></li>
                            <li><a onclick="GetUserDetails2(' . $user['id'] . ')">Ver +</a></li>
                            <li><a onclick="GetUserDetails(' . $user['id'] . ')">Editar</a></li>
                            <li><a onclick="DeleteUser(' . $user['id'] . ')">Borrar</a></li>    
                          </ul>
                     </div>    
            </tr>';

    }
} else {
    // records not found
    $data .= '<tr><td colspan="6">No hay pasajeros cargados.</td></tr>';
}

$data .= '</table>';

echo $data;

html css

asked by Santiago 29.07.2017 в 03:32

source

2 answers

0

You could use dropup ( see example 2 ) only for the last rows or all .

Example:

#table.table-responsive {
  overflow-x: visible;
  overflow-y: visible;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="table" class="table-responsive">
  <table class="table table-bordered table-striped table-condensed">
    <tr>
      <td>Algo</td>
      <td width="100px">
        <!-- ACA Usamos "dropup" en lugar de "dropdown" -->
        <div class="dropup">
          <button class="btn btn-success btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
            Acciones
            <span class="caret"></span>
          </button>
          <!-- ACA Agregamos "pull-right" para que se despliegue hacia la derecha -->
          <ul class="dropdown-menu pull-right">
            <li><a href="#" target="_blank">Comprobante</a></li>
            <li class="divider"></li>
            <li><a onclick="GetUserDetails2(id)">Ver +</a></li>
            <li><a onclick="GetUserDetails(id)">Editar</a></li>
            <li><a onclick="DeleteUser(id)">Borrar</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </table>
</div>

answered by 29.07.2017 в 12:21

C #, 3 Layers, Windows Forms - Improve Performance Show Pop Up of an image

score 1 · Accepted Answer

I do not think your problem can be solved using css only. However, as I see you use Bootstrap, there is a simple way to always show it inside the visible part of the page using javascript.

You can use the events generated by bootstrap shown.bs.dropdown and hidden.bs.dropdown to determine when a drop-down is displayed and calculate at that moment if the drop-down is shown below the visible part of the page, and use the class .dropup that provides bootstrap so that the expandable ones are shown above.

Here is an example using jQuery:

$('div.table-responsive').on("shown.bs.dropdown", ".dropdown", function() {

  var desplegable = $(this).children('ul.dropdown-menu');
  var boton = $(this).children(".dropdown-toggle");

  var separaciondesplegable = desplegable.offset();

  var espacioArriba = (separaciondesplegable.top - boton.height() - desplegable.height()) - $(window).scrollTop();

  var espacioAbajo = $(window).scrollTop() + $(window).height() - (separaciondesplegable.top + desplegable.height());

  if (espacioAbajo < 0 && (espacioArriba >= 0 || espacioArriba > espacioAbajo))
      $(this).addClass("dropup");

}).on("hidden.bs.dropdown", ".dropdown", function() {
    $(this).removeClass("dropup");
});

Demonstration in jsfiddle with comments in the code