Skip to content

alignChar CSS changes table row height #1713

@jcwren

Description

@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>

image
image

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions