How to control editor window width with jqueryui / editor template

How to control editor window width with jqueryui / editor template

loukinglouking Posts: 259Questions: 52Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • loukinglouking Posts: 259Questions: 52Answers: 0
    edited July 2018

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    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

  • loukinglouking Posts: 259Questions: 52Answers: 0

    That worked -- thanks!

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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?

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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.

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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

This discussion has been closed.