Drag guideline does not follow boundaries

Tags: #<Tag:0x00007f8b2b1d0bb0>
#1

When I drag to move a row the ‘guideline’ (I believe it’s called, from looking at the source) is offSet by too much. As I move further down the rows the problem becomes worse.

On the top row, it’s in roughly the right place:

image
image.jpg977×1303 306 KB

By the middle it’s about halfway down into the row:

image
image.jpg977×1303 400 KB

By the end it’s underneath the row entirely:

image
image.jpg977×1303 375 KB

Does anyone have any idea what might be causing this?

#2

Hi @HC289

please provide your CSS changes and height settings for (row, TD)

#3

In settings I have:

rowHeights={'23px'}

seems to have a 24px height on headers (I guess set by HOT?) seems to have a 24px height on rows in .htCore (I guess set by HOT?) 's have a css style of line-height: 23px and a height of 22
#4

I also see that the borders are missing. Do you set them to 0px or change the color to make them invisible?

#5

Oooo i set them to 0px. Setting them to invisible sounds like layout-maintaining magic though - i can give that a try!

#6

I recommend keeping the border but change their colors. In Handsontable we attach the bottom and right (not all) border to a cell and those values are taken into calculations by Handsontable.

If you would switch to the default borders you should get the moving shadows working well.

#7

Sorry for the delay in getting back to you on this. I’ve added borders back in and am coloring them dependent on state. It’s imperfect, for example multi-cell select now looks like this, it would have been white borders inside but i’m setting the blue myself. White borders looked bad and this isn’t much better.

image

That said, this still hasn’t fixed my guideline. I don’t think i’m setting any heights, padding or additional borders in the handsontable element. Could you perhaps call out a few tags I could explicitly inspect that guide the drag guideline @aleksandra_budnik?

With the rowHeight=23px setting mentioned previously my

seem to have a 22px height. font-size is 12px tds also have 22px height, 21px line height. All seemingly coming from HOT itself.

Thanks again,

HC

#8

Those pixel values are considered a default. Maybe you use some CSS transform or a browser/system ZOOM?
If you use a system/browser zoom this demo https://handsontable.com/docs/8.3.1/demo-moving.html would behave the same. With transform added to a table CSS you’d need to do some digging. Maybe there’s a CSS framework involved in the process?

#9

Thanks, instead of setting border-color: #FFFFFF to make grid lines invisible I was using border: 1px solid #FFFFFF on th/td - which threw things off

#10

Does it mean that now everything is placed correctly when rows are selected and moved?

#11

Yep! Success!

#12

Great. I’m glad to hear great news at the beginning of the workweek.

#13