Estoy intentando que los divs .escalaResponse
, quede a la misma anchura de la celda, pero que no la haga más alta, intenté con position: relative
pero eso hace el div del 100% del body creo y se sale a lo ancho pero ya no modifica la atura, como puedo combinar las posiciones, para que no se salga del ancho y tampoco se haga más grande la celda
$(function(){
var p = $('.panel');
$(p).find('table').DataTable();
});
th, td{
text-align: center;
}
.toggler{
cursor: pointer;
font-size: 1.5rem;
}
.finder{
min-width: 100%;
min-height: 120px;
max-height: 120px;
overflow-x: hidden;
overflow-y: auto;
background-color: #ffffff;
border: 1px solid #eaeaea;
position: absolute;
/*position: relative;*/
border-radius: 3px;
}
.smallest{
font-size: 1px;
color: #fff;
margin: 0 !important;
padding: 0 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<style media="screen">
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Usuario</th>
<th>Gerente</th>
<th>Escalamiento</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<tr data-id="1">
<td>foo</td>
<td>bar</td>
<td>
<input type="text" class="form-control input-sm escalaSearch" value="poo">
<div class="escalaResponse finder"></div>
<span class="smallest">poo</span>
</td>
<td>
<i style="color:green;" class="glyphicon glyphicon-ok-circle toggler"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
Me gustaría resolverlo por CSS, sin tener que meterle mano al JS.
.escalaResponse.
con la anchura de la celda?