Make line between resizable columns look draggable

Webix JS
#1

I find it hard to notice that datatable/treetable colums are resizable:

The user needs to move the mouse very carefully over the column divider, in order to get the resize cursor. Would it be possible to make the column divider look different, maybe wider or more like {view: 'resizer'} when resizeColumn is true?

#2

We can make the size of active area configurable ( area over which mouse works as resizer ). Do you think it will be enough ?

#3

That would be a good step.

Would it be difficult to change the borders left/right of the column divs to create a visibly thick line between columns?

#4

Yep, you can do it through css

http://webix.com/snippet/e79497a3

#5

Nice. I’ve applied it to cells as well - datatable with wider resizable column dividers.

I had noticed a tiny 1-pixel bug, which is now more readily apparent:

#6

That is caused by difference in structure and styling of header and cells. You need to set the width of header’s border on 1 px smaller than border in data part of datatable

http://webix.com/snippet/98529117

#7

I’m still seeing this issue, 3+ years later :slight_smile: Even if I make the line between columns huge (6 pixels wide in this snippet), the problem is that the area over which the mouse cursor takes the resize shape is still very narrow and very hard to place the mouse cursor over it, especially for users with dexterity issues, or using a touchpad. I’m using a laser gaming mouse, and still have trouble placing the cursor in the right spot.

Since this hurts accessibility, any chance for a fix?

Imgur

#8

@dandv try to use css:

<style>
 .mytable .webix_ss_header td{
  padding-right: 5px !important;
  padding-left: 5px !important;
  }
</style>
#9

@intregal: nice hack. The padding-left misaligns the header with the column though, by moving it to the right.

Imgur

The correct and visually accessible solution for this would be to make resizable columns look more like the resizer view. That way users will be able to quickly tell that the column is resizable. Right now, resizable or fixed columns look exactly the same.

#10

Hi Dan,

Now it can be easily configured by extra settings for resizeRow and resizeColumn properties:

resizeColumn: { size: 6 },
resizeRow: { size: 6 }

The size defines width/height of the area where “resize” cursor will appear.

https://docs.webix.com/samples/15_datatable/07_resize/12_resize_area.html

#11

Specifying a size object is a much cleaner solution than messing with the CSS, thank you!

Still, I would like to reiterate the suggestion to (optionally) make resizable columns visually different from fixed ones, because now they look the same, and the user needs to mouse over in order to discover that the columns are resizable.