1

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.

2
  • No me queda claro: ¿quieres el div .escalaResponse. con la anchura de la celda? Commented el 15 may. 2018 a las 16:40
  • Si, eso necesito, que quede del ancho de la celda, pero que tampoco haga más alta la celda, se me ocurrió position:fixed, pero no quiero que ande flotando por muchos lados, además que tendré varias con el mismo estilo Commented el 15 may. 2018 a las 16:43

2 respuestas 2

2

Se me ocurre lo siguiente:

El padre (celda) tendrá position:relative (que no afecta a como se ve, pero afecta a los hijos).

El hijo tendrá position:absolute que lo relaciona con el primer ascendiente que no tenga position:static.

Luego le añades un margin-left: -10px para compensar el margen del padre y ahí lo tienes, centrado y del mismo ancho, pero sin afectar al tamaño del padre:

$(function(){
  var p = $('.panel');
  $(p).find('table').DataTable();
});
th, td{
  text-align: center;
  
  position:relative
}
.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;

border-radius: 3px;
}

.smallest{
  font-size: 1px;
  color: #fff;
  margin: 0 !important;
  padding: 0 !important;
}

.escalaResponse {
  position: absolute;
  margin-left: -10px;
}
<!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>

1
  • Gracias sensei, me sirvió. Commented el 16 may. 2018 a las 17:05
1

Ahí lo tienes, lo he hecho con css, he cambiado el min-height y min-width

$(function(){
  var p = $('.panel');
  $(p).find('table').DataTable();
});
th, td{
      text-align: center;
    }

    .toggler{
      cursor: pointer;
      font-size: 1.5rem;
    }

    .finder{
    min-width: 199px;
    min-height: 25px;
    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>

1
  • Ya modifiqué mi pregunta, creo que me confundí con un selector, agradezco tu respuesta pero no es lo que necesito Commented el 15 may. 2018 a las 16:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.