Re-configure Editor forms

johnwillyn

I was wondering what the best approach might be to reconfigure the layout of the Editor forms.

I am considering small screen support, and thought that moving the default buttons from the footer to the header (and using Cancel and Done) might be better on these devices, and more consistent with the UI guidelines popularized by Apple.

I have looked at the displayController documentation, and it appears I would need to re-write the 'append' DOM in the 'open' handler to do this. If this is the case, can I use jQuery on this bit of DOM, or do I need to hand-craft these edits?

Are there any other ways to control the placement, size and labeling of the default buttons for these forms (or the inclusion of a footer for that matter)?

Thanks in advance,
JohnL

allan

If you want complete control, then the way to do it is with a custom display controller: https://editor.datatables.net/tutorials/display_controllers . That will let you have complete control over the layout of the elements of the form.

However, it is probably possible to move the buttons to the top using just CSS I suspect. position:absolute comes in very handy for this sort of thing - align the header and then the buttons at the top, with the form body below it.

Alternatively, if you want to manipulate the element order a bit, without creating a display controller, you could use the onOpen event to move the elements around as needed.

I'm afraid that the structure of the HTML elements added to the document by Editor is a point lacking in the documentation at the moment. This is something I'm going to resolve in 1.3, but for the moment, your browser's developer tools are probably the best way to see the structure that Editor adds - or looking at the Editor source.

Any questions about it, let me know.

Regards,
Allan