Disable column width changes in tables

Development
1

Hi.

Do you know a possibility to disable changing of table column width? This always sets an absolut value what makes those tables often unusable on mobile devices.

Best would be that dragging those columns wouldn’t affect anything but I could imagine a script removing those styles added to the colums while saving too.

Regards, Simpel

2

My solution would be:

Applying a CSS class definition (style sheet extension) like:

table.fixCol tbody tr th{width:auto !important}
table.fixCol tbody tr td{width:auto !important}

Before the protecting table, e.g.

(% class=fixCol %)
|=(% style="width: 355px;" %)A|=(% style="width: 1023px;" %)B|=(% style="width:356px" %)C
|(% style="width:355px" %)1|(% style="width:1023px" %)2|(% style="width:356px" %)3
|(% style="width:355px" %)11|(% style="width:1023px" %)22|(% style="width:356px" %)33

Due to “!important” the width will be overwritten.

A dynamic class definition could be done by a macro like

{{groovy}}
xwiki.linkx.use("data:text/css;base64,"+xwiki.context.macro.content.bytes.encodeBase64().toString(), ['type': 'text/css', 'rel': 'stylesheet'])
""
{{/groovy}}

A screen dependency might be useful in the css style definition like

@media only screen and (max-width: 600px) {
 ...
}

Regards, NorSch

1 Like
3

Thank you. I have been a bit more strict:

/* Don't allow any self dragged column width while editing tables */
/* This is due to accessibility and responsiveness reasons */
#xwikicontent table {
  width:auto !important;
}

#xwikicontent table tbody tr th {
  width:auto !important;
}

#xwikicontent table tbody tr td {
  width:auto !important;
}

At the end I would like to disable it at all because it messes up the wiki syntax a lot. But this is a good beginning.

4

I found out that the resizable table in ckeditor is a plugin: Table Resize | CKEditor.com.

But what I couldn’t found how to disable this plugin. So far I tried one by one:

editor.commands.get( 'resizeTableWidth' ).isEnabled = false;

or

config.table.resizeTableWidth.isEnabled = false;

or

CKEDITOR.plugins.remove( 'tableresize' );

or

CKEDITOR.replace( 'editor', {
  removePlugins: 'tableresize'
} );

or

CKEDITOR.replace( 'editor', {
  extraPlugins: 'tableresize'
} );

None if it work. All made the editor freeze. Any further hints?

5

There’s a dedicated “Disabled plugins” configuration option in the CKEditor administration section https://extensions.xwiki.org/xwiki/bin/view/Extension/CKEditor+Integration#HAdministrationSection . Isn’t that what you’re looking for?

1 Like
6

That was to easy. :wink: Yes, this works.
Thank you.

1 Like
7

To be clear: the solution to disable table resizing in the WYSIWYG editor (CKEditor) was to disable the tableresize CKEditor plugin from the dedicated administration section.