Resizer line mis-placed when using padding/margin/borders on the cells

[mike-lischke]

The position calculation for the resizer line seems not to include cell padding values or any other decoration like borders and is more and more offset the further right you start dragging.

To reproduce:

• Create a table with enough columns, which are enabled to resize them.
• Use this CSS rule to apply some padding:

.dataTable__header-cell,
.dataTable__row-cell {
    padding: 0px 5px;
}

Now try to resize a column. If you start left the resize line is close to the cursor (and column right border). The further right a column is, the larger is the distance between the right column border and the resize line.

A passable workaround is to set the padding on the row text class, though it's not perfect.

[nihgwu]

Sorry I don't quite understand the issue here, for the cells there are default paddings 0 7.5px, I don't think 0px 5px would make any difference, could you attach a gif to illustrate your problem

[mike-lischke]

OK, I see, you are relying on a specific box sizing mode. I don't use that, but keep what the browser default is.

To reproduce go to https://autodesk.github.io/react-base-table/examples/resizable, open the web dev console, select a header cell. Unselect all explicit box-sizing setting (n header-cell/row-cell and in *, ::after, ::before. Now resize a column and you will notice the offset of the resizer line.

It should be possible to compute the line position in a way that considers the box-sizing setting.

[nihgwu]

It's recommend to use border-box instead of content-box in this case, in the next version I will make box-sizing: border-box embedded so you can't override it, using content-box would make it complex to compute the box model for each cell, also you should use box-shadow instead of border-width if you want to show column border so the border width want effect the internal column width calculation

[mike-lischke]

Maybe you can mention that somewhere (e.g. in the Resize demo)?

Also, it's probably a good idea to provide a default style sheet for values you deem necessary. I created my own CSS, partially by inspecting the styles of the example pages.

For the borders: I'm not sure this is a good idea from a performance standpoint. Shadows (and the browser would have to compute one for each cell) are much more expensive than straight lines.

[nihgwu]

you don't need to create the style by yourself, you can inherits from https://github.com/Autodesk/react-base-table/blob/master/src/_BaseTable.scss if you are using scss, or modify from react-base-table/styles.css

about the borders, yes it's not intuitive right now, I'll find a solution in the next version