Position absolute element with respect to a tr

Question

Position absolute element with respect to a tr

Navigation

#1 by (1 votes)

1

Well, as the question says, I would need to position a <div> with position:absolute with respect to each of the rows.

<tr class = "danger" style="position:relative;">
    <td align = "left"><strong>&nbsp;<%=listaDatos.get(0) %></strong></td>
    <td align = "left" class="tdClave"  ope="<%=ope_actual%>" fl="<%=listaDatos.get(cabeceras_splited.length)%>" pl="<%=parametros_listado%>" tv="<%=texto_vuelta%>" pe="<%=listaDatos.get(cabeceras_splited.length)%>" tn="<%=titulo_navegacion%>">
        <div class="verOpcionesCelda oculto" align="center">
            <i style="margin-top:55%" class="fa fa-eye"></i>
        </div> 
        <div class="celdaOpciones">&nbsp;<small><strong>&nbsp;<%=listaDatos.get(j)%></strong></small></div>
    </td>                           
    <td align = "right"><small><%=listaDatos.get(j)%></small></td>  
    <td align = "right"><small><%=listaDatos.get(j+1)%></small></td>
    .....

Here the code of the row, what I would like is to place the <div> with class='verOpcionesCelda' in an absolute way with respect to <tr> ,

.verOpcionesCelda {

    position:absolute;
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
    height:100%;
    width:18px;
    float:left;
    left:-1px;
    top:0;
    background-color:#1c84c6;
    color:#FFF;

}

This is the code of the css, according to the specifications of the W3C, an absolute element will be positioned relative to the nearest positioned element. But in this case it makes me relative to the father div of everything.

The idea of all this is that when you click on that <div> it displays some sliders that occupy the whole row, as it was mounted now it only occupied the <td> it was created on, the idea is occupy the entire row now.

Any suggestions? Thanks in advance.

EDIT: Added link to jsbin

Here you have a link to what there is now, what I would like is that instead of occupying only one cell, it will occupy the whole row.

html css

asked by Hictus 23.11.2016 в 11:24

source

1 answer

How do I change cell values in a range with a "Yes" formula Declare the same service in several bundles

score 1 · Answer 1

What you are trying to do requires a wrapper (container) within the cell where you want to display the element in position: absolute .

It is worth mentioning that everything that needs to be shown in said cell must be within wrapper .

// UPDATE

To show an element that occupies the width of tr , it is necessary to use JS since the element wrapper only knows how much the td measures it contains it.

For example:

$(function() {
  
  $('.cellOptionsBtn').on('click', function() {
    var $btn = $(this),
        $container = $btn.parent(),
        $td = $container.closest('td'),
        $tr = $container.closest('tr'),
        $msg = $container.find('.cellOptionsMsg');
    
    $container.toggleClass('open');
    if ($container.hasClass('open')) {
      $btn.addClass('fa-times')
        .removeClass('fa-eye');
      
      // Agrandamos al $msg tanto como el ancho del $tr 
      // menos el ancho del $td menos ancho del $btn
      $msg.animate({width: $tr.outerWidth() - $td.outerWidth() - $btn.outerWidth()}, 500);
    }
    else {
      $btn.removeClass('fa-times')
        .addClass('fa-eye');
      
      // Achicamos $msg a 0
      $msg.animate({width: 0}, 500);
    }
  });
});

/* Estilos nuevos */
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.verOpcionesCelda {
  position:absolute;
  height:100%;
  left: 100%;
  top:0;
}
.verOpcionesCelda .cellOptionsBtn {
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
  position:absolute;
  top: 0;
  left: 100%;
  height:100%;
  width:22px;
  padding: 2px;
  background-color:#1c84c6;
  color:#FFF;
  text-align: center;
  cursor: pointer;
}
.verOpcionesCelda .cellOptionsMsg {
  position:relative;
  height:100%;
  width: 0;
  overflow: hidden;
  background-color: rgb(237, 85, 101);
  background-color: rgba(237, 85, 101,0.7);
}

.verOpcionesCelda.open .cellOptionsBtn {
  background-color: rgb(237, 85, 101);
}

/* Este estilo es solo para dar espacio a los costados*/
.row {
  margin: 0 15px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="row">
  <div class="col-md-12">
    <table class="table">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="row">
            <div class="wrapper">
              1
              <div class="verOpcionesCelda">
                <div class="cellOptionsMsg">
                  Opciones de la celda
                </div>
                <i class="cellOptionsBtn fa fa-eye"></i>
              </div>
            </div>
          </td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <td scope="row">
            <div class="wrapper">
              2
              <div class="verOpcionesCelda">
                <div class="cellOptionsMsg">
                  Opciones de la celda
                </div>
                <i class="cellOptionsBtn fa fa-eye"></i>
              </div>
            </div></td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
      </tbody>
    </table>
  </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"></script>