How to make column widths resizeable?

[userNotFoundByDefault]

Hi mar10,

in the demo i have found that sometimes content inside the cells is overflowing the width, leading to hidden text. Intuitively I tried to resize the column by hovering over the column border (cursor style changes) and dragged it to the right, but the column width remains static (like defined in the columns definition object).
How do you enable resizing of the columns? I've read the documentation but only found drag and drop for the nodes. Can I add custom event listeners (mousedown, mousemove, mouseup) to achieve that?

Thanks for your time and help

[mar10]

as you suspected, the feature is not yet implemented. Just a bit prepared by adding a resize handle and cursor.
Still missing is a configuration concept and the actual implementation.
If you want to start working on it, you may try add ing mouse handlers, modify tree.columns and redraw...

[mar10]

See also #95 for an approach

[userNotFoundByDefault]

Seems like its working already. Only the min-width seems to be applied when dragging starts and not when dragging stops. In the code-diff the drag-stop event checks for the min-width, but it seems to happen at drag-start.

[mar10]

Yes, i know, that's why I didn't merge yet
Probably an easy fix, when I find some time

[mar10]

Available with v0.10.0

[userNotFoundByDefault]

Thank you very much!

[devilsnare007]

Hi Martin,
I downloaded the latest zip file for making column widths resizable (v0.10.0). Now when I use the demo (https://mar10.github.io/wunderbaum/demo/#demo-large), I can successfully resize the columns by adjusting the header (cursor style changes), but when I do the exact same thing when running on a local server, it fails to resize even though i do see lots of dragstop(XX) events emitting in the console. I am using the exact same code as the large demo (https://mar10.github.io/wunderbaum/demo/demo-large.js) - just on a local server..

Wunderbaum<'demo'> dragstop(24) {type: 'dragstop', event: MouseEvent, dragElem: span.wb-col-resizer, dx: 24, dy: -5, …} {event: MouseEvent, canonicalName: '', tree: pe, node: null, region: 'column', …}
I am not sure what I am doing wrong here. Would be grateful for any help!

[mar10]

I couldn't reproduce it (you need to remove the options filter.connectInput and connectTopBreadcrumb, if yout don'T have the cotrols on the page, of course.
Any errors on the console? Otherwise please share a debuggable example.

[devilsnare007]

So the weird part is when I copy that exact same code to codepen and run it, it works fine, but when I run it from local server (python -m http.server ), it does not resize and simply logs the drag/dragstop events in console. I don't understand why....
https://codepen.io/devilsnare007/pen/PorYMBq
https://ibb.co/crpfmGx

[devilsnare007]

Just another update, it appears that MS Edge is the root cause (not sure what exactly in MS Edge causes this though). As you can see I am able to successfully resize the column widths in Chrome (Version 126.0.6478.115 (Official Build) (64-bit)) but not in MS Edge (Version 126.0.2592.87 (Official build) (64-bit))
https://ibb.co/qJkj4b3

[mar10]

Should be fixed with 0.10.1. Thanks for reporting.