How to control editor window width with jqueryui / editor template

louking

Hi Allan,

I am using jqueryui, and have a complex form I want to use an editor template with. Following the instructions at https://editor.datatables.net/manual/templates I created a template, but quickly realized that since I'm not using lightbox the class configuration under Lightbox customisation section wouldn't work.

I reverse engineered what you are doing within editor.jqueryui.js, and it looks like the .dialog widget is initialized using Editor.display.jquery.modalOptions which is configured to have width of 600px.

It seems like I cannot override this in my javascript because the dialog is created on initialization. Is there a reason the width needs to be hard-configured? Or is there any way to override this that I'm missing?

BTW, seems to work a little better which changing the 600 to 'auto' using the debugger, but maybe there's something still not quite right with position.

louking

Not sure what I was seeing with position. For now I have patched to width: 'auto' within Editor.display.jquery.modalOptions assignment. This seems to set the width to most of the screen, but would prefer to be working with released code.

Also using width:'auto' I haven't quite figured out how the width is being set, so I'm a little uncomfortable with this patch in any case.

allan

Use

$.extend( $.fn.DataTable.Editor.display.jqueryui.modalOptions, {
    width: 'auto'
} );

Before you initialise Editor if you want to customise the options used for the jQuery UI modal. They are in that static property to allow for exactly this.

As to how auto width is set - you'd need to refer to the jQuery UI documentation.

Regards,
Allan

louking

That worked -- thanks!

louking

Because of https://datatables.net/forums/discussion/52259/pattern-to-launch-form-from-other-form I need to have two widths specified, one for the main editor and one for the subform.

When I set {width: 'auto', minWidth:600} the main form is fine, but the sub-form is very narrow. Actually, the width of the subform jumps to 600, but only after I try to resize it.

Since I'm using jqueryui I reverse engineered editor.jqueryui.js and ended up with the following code, which works, but accesses and Editor internal variable.

sub_editor.__dialouge.dialog( "option", "width", 600 );

I tried using sub_editor.node() instead of using the Editor internal variable, but I got an error that I was trying to set an option on .dialog before it was ready.

Is there a cleaner way to achieve what I'm trying?

allan

Would just using {width: 600} for the initialisation do the same thing? That will fix the width to 600px, just like the line you have there.

Allan

louking

That doesn't work because that affects all forms. I want one form to be larger because I've set a template for it. 'auto' seems to work for that form, but for the default forms they are quite narrow, so I'm setting the option selectively.

louking

The real problem is that the minWidth isn't working. I suspect that's not an Editor issue, but in jqueryui, so I'm looking for a workaround.

allan

In which case I think your workaround using the private variable is probably about as good as it gets at the moment I'm afraid.

Allan

louking

I learned since I posted the workaround using sub_editor.__dialouge.dialog( "option", "width", 600 ); that adding the following to my style.css achieves the desired result, so I've removed my access the internal variable.

.ui-dialog {
  min-width: 600px;
}

posting here for anyone who followed this