Click-and-drag setting for table column width

[watwinc]

This one's been around in the fora for a couple of years, but searching hasn't turned up any fix. Tables with more than one column have equal, fixed column width, with no apparent way to modify this. Other editors allow you to set column widths by clicking on a column edge and draging.

[Frederico Caldeira Knabben]

For now, you can right-click in a cell and set its width.

Can you point us to other editors that do that?

[Martin Knowles]

This is the bulk of [243]. At the moment, clicking on either the table border between cells, or a region within 3px to the left of the cell border inside a cell will bring up a blue line that lets you move resize the column. This has been tested on Mozilla, ie6, and ie7.

The line color should ideally be moved to the config files.

At present, showing the correct cursor (you should ideally get the size-east-west cursor) is a problem, as is processing the selection if you hit the cell border (because of how the browsers hand back -- or fail to hand back -- messages if you click on cell boundaries) This sometimes works and sometimes doesn't, and needs more testing and possible rework. The actual sizing algorithm works based on the tableMap code and should (for the most part) generate either pixel widths or percent widths based on the original specification of the table.

It does *not* presently work on ill-formed tables where you have useless colspans (i.e. all rows have an identical colspan >1 inside a table), though other colspan'd cases behave properly.

[Alfonso Martínez de Lizarrondo]

I've tested the changes and looks very nice. It's difficult at the beggining to know where to start dragging, but once it starts moving it does resize the table nicely.

I've noticed a problem in Firefox, while resizing it outputs constantly this error:

FCK.EditorDocument.selection has no properties
http://localhost/fckdev/editor/_source/internals/fcktablehandler.js
Line 703

And hovering over the built-in dragging corners (also Firefox) outputs this exception (I've translated the first line):

[Exception... "'Permission denied to get the property HTMLSpanElement.tagName' 
when calling method: [nsIDOMEventListener::handleEvent]"  nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)"  location: "<unknown>"  data: no]

Line 0

[Frederico Caldeira Knabben]

Martin's proposal is pretty cool.

There are still many things to consider and fix to complete it, but it is a good startup. These are some things to think about (notes for future reference actually):

• It seams that the resize is triggered when clicking in the right border of a cell, precisely. Maybe we could find a way to do that inside the space between two cells (which is visually the table border). For testing, just create a table with cellspacing=10.

• The bar should be wide as the border (again, the space between cells).

• It seams to work better with FF. In IE the table "dances" when resizing or simply clicking in the sizing point.

• The cursor should definitively be changed when "moving" the mouse over the resize space (e-resize), and remain like that while resizing.

• The selection should not change when clicking for resize (today, the caret moves to the cell where we start the resize.

• The cell is not really getting the precise size we are setting.

• Many things are placed in FCKTableHandler, while I believe it worths to have a dedicated FCKTableResizer for it (that maybe make calls to FCKTableHandler for some things).

• I'm a little bit afraid with the amount of code related to it... Martin, do you think it is doable to create it as a plugin? Or (not only Martin now) should we see this as a strictly needed core feature?

Congrats again Martin.

[Hubert Denkmair]

I am so curious. Intuitive column resizing would be such an important feature.

Where / how can I test Martin's changes? Seems as if they're not in the nightly build, do I have to svn checkout a special version?

However, having not (yet) tested this, I would suggest another way of column resizing.
I'm not-so-sure whether clicking near the cell borders is an intuitive solution for less-experienced users.

Maybe it would be possible to render a small header (like about every detail listview in Windows and other systems ;) to the top of a table as soon as a user is editing the table's contents. In this header, the user would be able to drag some kind of separator to resize the corresponding column.

Unfortunately I have close-to-zero insight in FCKs internals and few experience in creating FCK plugins, but maybe this could be implemented as a plugin, and if somebody hints me in the right directions (e.g. how to detect if the cursor/user enters/leaves a table, what should be considered when rendering elements above the editor window etc.), I'd be glad to try this on my own...

[Frederico Caldeira Knabben]

You may checkout Martin's directory from the SVN: ​http://svn.fckeditor.net/FCKeditor/branches/developers/mjk

[Martin Kou]

This is certainly useful. I'll see if I can fix the listed problems with Martin's patch and make it into a plug-in.

[Martin Kou]

I've built a plug-in called "dragresizetable" which improves upon mjk's branch code. It has been tested to work in IE, Firefox and Safari.

The code has been uploaded as change set [480] in trunk.

The plug-in is not enabled by default, however. To enable it, edit fckconfig.js and uncomment the line:

// FCKConfig.Plugins.Add( 'dragresizetable' );

After that, reload FCKeditor and create a table. Place your mouse cursor over the vertical space between two table cells, and you'll see a bar that lets you drag and resize the table columns.

[Frederico Caldeira Knabben]

Congrats for the wonderful job in this feature. It works pretty well.

I'm tempted to move it to the core, but it would add 10KB to the compressed code. For now let's stay with it as a plugin.