Perspective table col header and cells not aligning

Using Perspective 8.1.10

For a table, there are multiple places to set “style” properties. For this issue, I’m focusing on these three:

  1. cells/style - presumably applies to all cells (but not headers)
  2. column[#]/heading/style - presumably applies to the heading of the column
  3. column[#]/style - presumably applies to the whole column (but not the headers?)

If I create a table, and set margin/padding on the cells/style property, but do NOT set the same margin/padding on the column[#]/heading/style, after adding enough columns, the headers no longer align with the cells below.

Also, it seems to ignore any margin/padding set on column[#]/style.

Actually looks like column[#]/style has been updated.

This feature was changed in Ignition version 8.1.11

So I might need to retest.

I'm trying to find the other thread on this, but it is highly annoying. The header style has a 5px margin and the cell content does not. To make the header left aligned to the cell content you need to add a cells.style.marginLeft = 5px on every table you use. Super annoying, I just did this 5 times today.

1 Like

I’m on v8.1.16 and having this same issue. Seems to me like the header has a “built in” padding-left: 5px but the cells do not. You can confirm it’s padding not margin by applying a border to the header then manipulating the margin and padding.

Combining @ryanjmclaughlin’s findings and my own distinction between margin and padding, adding padding-left: 5px fixes the issue. Definitely seems this should come “out-of-the-box” with the table component.

I’m also on v8.1.16 and having this issue with all my tables. When I looked at the rendered HTML/CSS with the developer tool, it looks like the flex style is being removed on the last column for some reason. The flex style isn’t removed on the header column, thus causing a misalignment. When I manually put it back in with the developer tool, it fixes it. This might be a bug with v8.1.16.

I have the issue in 8.1.19

Took me a while to figure out where to put what to get the style to fix my table.
For quick reference in the future, I made a style and applied it in this manner on the table.