Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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__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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

nihgwucommented, May 6, 2020

you don’t need to create the style by yourself, you can inherits from 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

mike-lischkecommented, May 6, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Adjust the Content, Padding, Border, and Margins of ...
You'll start by creating a <div> element that contains text content and then adjust the values of each of these boxes to help...
Read more >
border-spacing - CSS: Cascading Style Sheets | MDN
The border-spacing CSS property sets the distance between the borders of adjacent cells in a . This property applies only when ...
Read more >
Understand margins, paddings, and borders - How to Canvas
Margins and padding both work similarly to create space between elements and content in our Canvas courses, but they do so differently.
Read more >
Keep left margin of a div inline with another div when resizing
In that case, instead of doing separate margins for the top bar and the row of cards, you could just add padding: 0...
Read more >
LaTeX/Tables - Wikibooks, open books for an open world
Mastering the art of table construction in LaTeX is therefore necessary to produce quality papers and with sufficient practice one can print beautiful ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found