I have seen alot of topics for people inquiring about how one can go about changing the default layout id the detail tables while in master/detail add/edit page.
ALthough the maker products dont offer an out of the box solution for this yet, you actually have alot to work with coz they have done the difficult job of managing the fucntionality of master/detail add and edit pages (which I assure you is "the biggest problem", pretty impressive if you think about it).
BUt since you have the power of jquery and javascript you can basically rearrange any content on any form to anything you want.
I have been able to customise my master details add & edit forms and other similar cusomizaions by moving elements around using startup script palce in master add/edit page respectively. But ofcourse I still find that i mostly dont get to change the layout of detail oages from horisontal t vertical as it looks bad and is not so usable but it still doable thorugh jquery.
HOW:
ALways inspect the form to find the identifiers for various elements and cotainers so you can know how to locates and element in query either using its classes or id. with that figured out all you need it how to do you want it to look like, then write qjuery to move elemts to where erver you want.
Example:
-assuming I have a master tabel with three detail tables (delivery_note_outward,delivery_note_product_part,delivery_note_product)
-I enable the detial tables on master add page.
-when I go tomaster detail add page, they will appear in tabed format.
-LET SAY: I want them to appear one below the other without need for user to first click tabs to access them.
SOLUTION 1(more control in layout):
-After I inspect the master detail add page I see the detail tables are in their respective divs with ids as follows (tab_delivery_note_outward,tab_delivery_note_product_part,tab_delivery_note_product)
-what i want it to move them all outside to be directly under the div with id = ewDetailPages (or anywhere I want). That way they can be one after the other.
-SO what I do is i go to the master page add/copy startup script and paste the following code:
//MOVE EACH OF THE CONTENT DIVS TO OUTSIDE INSTEAD OF TABS
$("#tab_delivery_note_outward").appendTo(".ewDetailPages");
$("#tab_delivery_note_product_part").appendTo(".ewDetailPages");
$("#tab_delivery_note_product").appendTo(".ewDetailPages");
//remove the div which was holdng our detail content
$("nav-tabs-custom").remove();
-after i generate the scripts I can see them moved out to one below the other.
SOLUTION 2(this is not recomemnded but it helps prove a certain point):
Sometimes you just need to undertand what css and js is happening in you html page, for example I know that while drawing the HTML the detail tables are still drawn as divs one after another BUT since the divs enclosing them have tab controll classes the divs appear ina tabed format.
-SO i can just remove the classes that make divs appear and tabs and the divs will start to be drawn on after another without extra tabbing.
-eg I go to startup script again and paste this.
//remove tab class form the div enclosing all detail table divs
$(".tab-content").attr('class','');
//remove the div which was holdng our detail content
$('[class="nav nav-tabs"]').remove();
-after i generate the scripts I can see them moved out to one below the other.
HINTS:
-google jquery appendTo,Inserbefore, InsterAfter etc they will help you find more ideas on how to use them
-as ive given in example, you just need a little creativity and you can do anything on any form in client scripts.
-you can even add extra html elements then move content into them to have another layout as you wish.
-you can even convert the originally horizontall layout to vertical IF YOU REALLY WNATED to, and ofcourse write code once and paste for all forms.
CONCLUSION:
-some of us ight still be so stuck up to the bsckend so we always try to think that we can achieve everything from the backend. BUT you should know that there is not greater lagugae to use to modify a web page's interface than the clien tlanguages like javascript and jquery. I know it might not seem important now but if you can ve nture into it a little its VERY easy just give it some time and google here and there, be creative you can achieve greate things as proof you will find out thet most libraries like sliders, charts plugins etc used for web applications are written using plain clinet scripting like jquery. You dont have to learn everything just ggole what you need.