alignChar CSS changes table row height

[jcwren]

I had a table that was configured exactly as I want it (first image). When I added the Align Character Widget, it did indeed align the SNR column on the decimal point as desired, but it added space to the bottom of the row (second image). I'm no CSS expert (by a long shot!) and even after poking at this for a couple hours, I can't figure out how to get the rows back to the original height.

In my experiments, I found that commenting out the display: inline-block in the .ts-align-wrap, .ts-align-left, .ts-align-right CSS would get the rows back to the correct height, but (not surprisingly) the decimals were no longer aligned.

This is under Chrome Version 80.0.3987.116 (Official Build) (64-bit). It does the same thing on the Mac verson. Can someone provide advice on how to correct this (if it's CSS related, please use simple words :) ).

This is the HTML from one of the SNR column entries.

<td>
  <span class="ts-align-wrap">
    <span class="ts-align-left" style="min-width:60%">10</span>
    <span class="ts-align-right" style="min-width:40%">
      <i>.</i>
      2
    </span>
  </span>
</td>

[Mottie]

Hi @jcwren!

Remove the .ts-align-wrap selector from this CSS definition:

.ts-align-wrap,
.ts-align-left,
.ts-align-right {
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

I think having the wrapper set to inline-block is causing the shift in height.

[jcwren]

Eliminating it completely fixed the row spacing, but broke the alignment. Poking at it a little more, it seems that removing the overflow: hidden; is what fixes the row spacing and keeps the columns aligned. There's probably some implication if the column did overflow, but that will never happen in this case.

/*
**  CSS for tablesorter
*/
.ts-align-wrap {
  white-space: nowrap;
  width: 100%;
  /*
  overflow: hidden;
  */
}
.ts-align-wrap, .ts-align-left, .ts-align-right {
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ts-align-left {
  text-align: right;
}
.ts-align-right {
  text-align: left;
}

[Mottie]

Demo has been updated! Thanks!