Is there a way to customize the built-in layout of the editor modal?

abenitez

I have a table that has around 10 columns. The DataTable shows only the main columns to the user (only 4) but when the user adds a new row (or Edit), the modal has to show the 10 fields. Some of them would be textareas. The fields would perfectly fit on the screen except that the Editor's default layout displays them as a list and the user is forced to scroll down to populate them and press the save button.

I would like to "refactor" the built-in layout for this particular screen... Is there a practical way to simply make the modal bigger and position let's say... 5 fields on the left and fields on the right (side-by-side)? The other need is that I have a drop down that when the user selects "Other", a field beside (and not under) would appear for the user to enter some text.

I understand that this could be accomplished probably with a displayController however I find the example provided a bit too simple since it uses the built-in layout. On the other hand, I understand that the main goal of the DataTables Editor is to use the built-in form to input data... Please advise if I should simply create a bootstrap modal without using the DataTables editing functionality.

Thanks.

allan

Hi,

This example shows how you could use a multi-column layout for the Editor form view.

To made the modal wider you would need to apply a style to the div.DTED_Lightbox_Wrapper element - for example:

div.DTED_Lightbox_Wrapper {
  margin-left: -500px;
  width: 1000px;
}

Allan