CODEWITHSUNDEEP
htmlcsspseudo-element
troyz
troyz

Reputation: 1385

Floating elements next to table row

I'm trying to show two icons next to a table row when I hover over it, it would be the typical edit/delete etc buttons.

I've tried adding an extra column with the icons and positioning it with both relative and absolute, but it'll mess up the style of the first column after it

<td class="actions">
    <i *ngIf="editing" (click)="saveEdit()" class="fa fa-floppy-o" aria-hidden="true"></i>
    <i *ngIf="editing" (click)="cancelEdit()" class="fa fa-times" aria-hidden="true"></i>
</td>

 

.actions {
     position: relative;
     right: 5%;
     padding: 0;
     border: 0;
     vertical-align: middle;
}

This is what I want to do when hovering over a row Mockup

$background: #22304b;
$textColor: #58595b;
$lightBlue: #00b9cd;
$lightBlueDark: #0193a2;
$borderGrey: rgb(219, 219, 219);
$backgroundGrey: rgb(246, 246, 249);
table {
  border-radius: 4px;
  border: 1px solid $borderGrey;
  margin-bottom: 0;
  
  .header {
    background: $backgroundGrey;
    color: $background;
    padding: 25px 15px 15px;
    border-top: 1px solid $borderGrey;
    border-bottom: 0;
    text-align: center;
    font-size: 20px;
  }
  .header:last-of-type {
    border-right: 1px solid $borderGrey;
  }
  tr.row {
    transition: background 0.3s ease;
    padding: 15px;
    .column {
      border-right: 1px solid $borderGrey;
      border-top: 0;
      vertical-align: middle;
      font-size: 20px;
    }
    .column.checkbox,
    .column.centered {
      text-align: center;
    }
    .column:last-child {
      border-right: 0;
    }
  }
  tr.row:nth-child(even) {
    background: $backgroundGrey;
  }
  tr.row:hover {
    background: rgba($borderGrey, 0.7);
  }
}

#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
<div id="wrapper">
  <table class="table">
    <thead>
      <tr>
        <th class="header">Company</th>
        <th class="header">Role</th>
        <th class="header rate">Start Date</th>
        <th class="header">End Date</th>
        <th class="header rate">Pay Rate</th>
        <th class="header rate">Charge Rate</th>
        <th class="header rate">Holiday Rate</th>
        <th class="header rate">Cost Code</th>
        <th class="header">Supervisor</th>
        <th class="header">Supervisor Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row">
        <td class="column centered"> name </td>
        <td class="column centered">title</td>
        <td class="column centered">date</td>
        <td class="column centered">date2</td>
        <td class="column centered">10€</td>
        <td class="column centered">10€</td>
        <td class="column centered">10%</td>
        <td class="column centered">blabla</td>
        <td class="column centered">approver</td>
        <td class="column centered">[email protected]</td>
      </tr>
      <tr class="row">
        <td class="column centered"> name </td>
        <td class="column centered">title</td>
        <td class="column centered">date</td>
        <td class="column centered">date2</td>
        <td class="column centered">10€</td>
        <td class="column centered">10€</td>
        <td class="column centered">10%</td>
        <td class="column centered">blabla</td>
        <td class="column centered">approver</td>
        <td class="column centered">[email protected]</td>
      </tr>
      <tr class="row">
        <td class="column centered"> name </td>
        <td class="column centered">title</td>
        <td class="column centered">date</td>
        <td class="column centered">date2</td>
        <td class="column centered">10€</td>
        <td class="column centered">10€</td>
        <td class="column centered">10%</td>
        <td class="column centered">blabla</td>
        <td class="column centered">approver</td>
        <td class="column centered">[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

This is what I currently have (Codepen)

Thank you!

Upvotes: 1

Views: 2693

Answers (1)

Johannes
Johannes

Reputation: 67778

You can add an additional, absolutely positioned element with the icons inside each first td (I gave that a class called .editicons) and use the following CSS. This makes it invisible by default and visible (left of the row) on hovering the row.

td:first-child {
    position: relative;
}
.editicons {
  position: absolute;
  display: none;
  color: red;
  width: 60px;
  left: -50px;
}
tr:hover .editicons {
  display: block;
}

http://codepen.io/anon/pen/peryea

Upvotes: 2

Related Questions