Get text height inside table cells

Question

I have created a responsive table like this:

$(document).ready(function() {
  adjustPadding();
});

$(window).resize(function() {
  adjustPadding();
});

function adjustPadding() {
  $("td:not(.table-generic-btn-container):not(.input-amount-row):not(.table-action)").each(function() {
    var text = $(this).text();
    var padding = parseInt(($(this).css("padding-top")).slice(0,-2));
    if (padding <= 8) {
      $(this).css({"padding-top": "8px"});
      $(this).css({"padding-bottom": "8px"});
    }
  });
}

.dashed-wrapper {
  padding-bottom: 48px; 
}

table.table-generic {
  border-spacing:0;
  border-collapse: collapse;
  font-size: 13px;
  display: block;
  overflow-x: scroll;
  color: #333;
  margin-left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  background-color: #fff;
}

.table-generic tr {
  
}

.table-generic tr.first-row {
  border-bottom: solid 2px #D1D1D1;
  cursor: default;
}

.table-generic tr.first-row:hover {
  background: #fff; 
}

.table-generic td, th {
  text-align: left;
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
}

.table-generic tr.selectable-row:hover {
  background-color: #f1f1f1; 
  transition: background-color 0.2s;
}

.table-generic th {
  font-weight: 700;
}

.alternate-bg {
  background-color: #f8f8f8; 
}

.selected-bg,
.selected-bg:hover {
  background-color: #D0F3FF !important;
  outline: solid 1px #fff !important;
  transition: background-color 0.2s;
}

.table-generic td.icon {
  text-align: center; 
  padding-left: 0;
}

i {
  font-size: 13px;
  color: #aaa;
  cursor: pointer;
}

.icon i:hover {
  color: #00c983;
}

.table-sort i {
  margin-left: 8px;
  display: inline;
}

.money {
  text-align: right !important; 
}

.history a {
  color: #0099ff;
  text-decoration: underline;
}

button {
  height: 32px;
  width: 48px;
  margin-right: 4px;
  border-radius: 3px;
  border: none;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
}

button i {
  color: #fff;
  line-height: 20px !important;
}

.green {
  background-color: #00c983;
}

.red {
  background-color: #FF7979;
}

.table-action {
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}

th.table-action .checkbox {
  transform: translateX(-6px); 
}

.table-action input {
  opacity: 0;
  position: relative;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: solid 1px #D1D1D1;
  border-radius: 2px;
  display: inline-block;
  margin-left: -32px;
  margin-top: 4px;
  cursor: pointer;
  transition: border 0.4s;
}

.checkbox-checked {
  border: solid 1px #00c983;
  margin-top: 2px;
  transition: border 0.4s;
}

.checkbox-input {
  cursor: pointer;
}

.checkbox i {
  color: #00c983;
  display: none;
}

.checkbox i:hover {
  color: #00c983;
}

.table-generic th:first-child,
.table-generic td:first-child {
  padding-left: 24px;
}

#table1 th:first-child,
#table1 td:first-child {
  padding-left: 40px;
  padding-right: 0;
}

.table-generic td:last-child {
  padding-right: 24px;
}

.table-action-last {
  padding-right: 16px;
  cursor: pointer;
  text-align: center;
}

th.table-action-last {
  cursor: default;
}

.table-sort {
  cursor: pointer; 
}

.table-pagination {
  width: 100%;
  display: block;
}

.table-pagination-btn i {
  color: #333; 
}

.table-pagination-btn {
  display: flex;
  float: right;
  height: 38px;
  border: solid 1px #D1D1D1;
  border-radius: 3px;
}

.table-pagination-btn-each {
  line-height: 38px; 
  width: 38px;
  display: inline-block;
  text-align: center;
  border-left: solid 1px #D1D1D1;
  font-size: 12px;
  cursor: pointer;
}

.table-pagination-btn-each:first-child {
  border-left: transparent; 
}

.table-pagination-btn-each:hover {
  background-color: #f8f8f8; 
  transition: background-color 0.2s;
}

.table-pagination-btn-each i {
  font-size: 8px; 
  transform: translateY(-1px);
}

.table-pagination-btn-each.selected-page {
  background-color: #00c983;
  font-weight: 700;
  color: #fff;
  cursor: default;
}

.pagination-disabled,
.pagination-disabled:hover {
  cursor: default;
  color: #aaa;
  background-color: #fff;
}

.pagination-disabled i {
  cursor: default;
  color: #aaa;
}

.table-generic td .yes-no {
  color: #333; 
  cursor: default;
}

.table-generic td .fa-minus {
  font-size: 8px; 
}

.yes-no-cell {
  text-align: center !important;
  padding-right: 32px !important;
  color: transparent;
}

.table-generic td .input-text {
  height: 30px; 
  margin-bottom: 0;
  width: 118px;
  background-color: #fff;
}

.input-amount {
  text-align: right; 
  padding-right: 28px !important;
}

.input-amount-row {
  position: relative;
}

.spinner-table {
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
}

.table-view-link {
  color: #0099ff; 
  font-weight: 700;
  text-decoration: none;
}

.table-view-link:hover {
  text-decoration: underline;
}

.spinner-up i,
.spinner-down i {
  color: #777;
}

.spinner-up i:hover,
.spinner-down i:hover {
  color: #00c983;
}

.spinner-down i {
  transform: translateY(-1px); 
}

a:hover {
  color: #006BB3;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.15);
}

.table-caption {
  margin-top: 24px; 
}

td .fa-check {
  margin-left: 1.5px; 
}

#table2 td {
  white-space: nowrap; 
}

.table-generic-btn-container {
  white-space: nowrap !important; 
}







  
    
    Edit
    Request No. 
    Employee ID 
    Employee Name  
    For Family 
    Request Date 
    Editable Example 
    Total Amount 
    Details
    Approval History 
  
  
    
    
    REI/TRA/04/005 
    EMP004
    I Putu Yudi Haryasa
    0
    04 May 2018
    
      
      
      
        
        
      
    
    300,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/04/004
    EMP005
    Daniel Giovanni Gunawan
    0
    04 May 2018
    
      
      
      
        
        
      
    
    550,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/04/003 
    EMP006
    Muhammad Nadzeri Munawar
    1
    03 May 2018
    
      
      
      
        
        
      
    
    4,500,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/03/002 
    EMP007
    Glenn Kristanto
    1
    02 May 2018
    
      
      
      
        
        
      
    
    3,000,000.00
    See details
    See approvals
  
  
    
    
    REI/TRA/03/001 
    EMP008
    Hendryanto Fudiko
    0
    02 May 2018
    
      
      
      
        
        
      
    
    150,000.00
    See details
    See approvals
  
  
    
    
    REI/TRA/02/001 
    EMP004
    I Putu Yudi Haryasa
    0
    28 Apr 2018
    
      
      
      
        
        
      
    
    300,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/01/005
    EMP021
    Daniel Widjaja
    0
    25 Apr 2018
    
      
      
      
        
        
      
    
    550,000.00
    See details
    See approvals
  
  
    
    
    REI/MED/01/004 
    EMP020
    Faris Kurniawan
    1
    25 Apr 2018
    
      
      
      
        
        
      
    
    4,500,000.00
    See details
    See approvals
  
  
    
    
    REI/ENT/01/002 
    EMP015
    Romy Kusuma
    1
    11 Apr 2018
    
      
      
      
        
        
      
    
    3,000,000.00
    See details
    See approvals
  
  
    
    
    REI/ENT/01/001 
    EMP006
    Muhammad Nadzeri Munawar
    0
    09 Apr 2018
    
      
      
      
        
        
      
    
    150,000.00
    See details
    See approvals

As you can see, the text inside the table can be more than one line. When all the texts inside a row are in one line, I want to make the row height fixed to 40px. However, when any of the texts inside a row are more than one line, I want to add extra padding-top and padding-bottom to 8px.

I have an idea to iterate all the cell content height, and when I get the "tall" (more than one line) text, I set the padding to it so all the cells inside that row follow the height. However, my jquery attempt always get the cells' height which is 40px, not the content inside height. Also, I tried getting all the cells' padding-top since I can see the padding height difference between one line text cells and more than one line text cells. But it always results in 0.

Any help appreciated! :)

Get text height inside table cells

Answers (1)

Related Questions