Custom Field Layout in Modal

Maha80

Dear Allan,

I am working on a complex Editor modal with a lot of custom field type plugins which consume a lot of height ( http://up.picr.de/23919353ls.png ).

I was trying to create a custom layout with columns (e.g. two fields on the same line). Unfortunately the display controller plugins have not the ability to alter the global layout without doing heavy dom operations once the modal body html has been generated.

Is there a best practice approach you could recommend in order to achieve the a/m?

Maybe it would be good feature for the future to provide a template for the modal body Content.

Thx for your help in advance.

Martin

allan

Hi Martin,

I would suggest using a class name to do this. For example your Consumer and Quantity fields might be assigned a class name (fields.className) of columns_1_2 which you could then add a little CSS to:

div.columns_1_2 {
  float: left;
  width:50%;
}

for the following field you would need to clear that (which again could be done by adding a class name).

Its a little bit manual assigning these classes, but you could achieve some really complex layouts this way.

Regarding a template - I completely agree. That is something that I plan to introduce in a future update to Editor.

Regards,
Allan

Maha80

Dear Allan,

thx for your prompt reply!

I am afraid this solution does not work for me as I am using bootstrap which needs regrouping according to the row/col paradigm.

What do you think about modifying the "open" function of the bootstrap display controller and to transform the content of "append" to the desired html output for the modal-content?

I am using multiple editor instances. How can I distinguish beetween them in the "open" function?

Thx you very much for your help.

Martin

allan

Use the displayOrder event - listen for that and then you can modify the contents of the form as you require. Editor will always have them in simple top down order when that event is triggered.

Allan

Maha80

Hi Allan,

I am facing some problems with this approach. If the modal is opened for the first time, displayOrder does not provide access to $('div.DTE_Body_Content'). Furthermore this event is always fired twice!

Please advise.

Thx
Martin

allan

Hi Martin,

Use the displayNode() method to get the node that contains the form elements.

The event will trigger many times during the life time of the form. As I noted, you would need to layout the form each time the event is triggered if you want to do this.

Allan

Maha80

Hi Allan,

I am sorry. But I still can't get it working. $('div.DTE_Form_Content', editor.displayNode()) returns undefined unless the editor modal has been shown. I updated to the newest version of dt and dte. But same behaviour.

When looking at the display controller code, I have noticed that the fields are appended to the modal-content in the "open" function and not already with the "init" function. Maybe thats the problem.

Can I force editor to compute the node?

Kind regards
Martin

allan

Hi Martin,

Possibly the easiest option here is going to change Editor slightly so that it will pass the form element in to the displayOrder event. At the moment there is no way to get at it until the open event. I'll get this in for 1.5.4 which I plan to release tomorrow.

Regards,
Allan

Maha80

Sounds great! So I will wait for tomorrow's release.

Regards
Martin

Maha80

It worked!

Thx a lot!

Martin