Change default linear layout to grid layout with jQuery

[oscarnortiz]

I tried to change the default PHPMaker linear form layout to the bootstrap grid layout in an easy way using jquery.
This is using PHPMaker 2020

All you have to do is add this code to TABLE > Client Scripts > Table-Specific > (Add/Copy or edit) > Startup Script:

$("label.ew-label").attr("class","col col-form-label ew-label");
$(".ew-add-div").attr("class","ew-add-div row");
$(".ew-add-div").attr("style","width: 700px;max-width: 100%"); /*700 is the width of the form container*/
$("div[id^='r_'].form-group").attr("class","form-group col-12");
$("div[id^='r_'] > div").attr("class","col");
$("input[id^='x_']").attr("style","width:100%");

/*If you're not familiar with the bootstrap grid layout, just imagine that the container is divided in 12 columns (12 = 100% width)
By default, right now all the fields occupy 12 columns, ignoring the Size atribute in field setup.
The form is composed by "r_" divs.
Each "r_" div contains the label + input of each table field (ie: r_name, r_sex)
So, you can change the width of a r_ div if you don't want that field occupy the 12 columns.
if you want a field that ocuppy just half of the space, assign it 6 columns, one third: 4 columns, one quarter: 3 columns...
just add a line for each customized field like this:
$("#r_[FIELD NAME]").attr("class","form-group col-sm-[NUMBER OF COLUMNS]");
*/

$("#r_name").attr("class","form-group col-sm-6"); /* half */
$("#r_lastname").attr("class","form-group col-sm-6"); /* half */
$("#r_idnumber").attr("class","form-group col-sm-4"); /* a third */
$("#r_telephone").attr("class","form-group col-sm-4"); /* a third */
$("#r_mobile").attr("class","form-group col-sm-4"); /* a third */
$("#r_city").attr("class","form-group col-sm-6");
$("#r_region").attr("class","form-group col-sm-6");

[sticcino]

Hi,

what is this suppose to do?, I tried it on an edit page and nothing appears to happen except for one of my tabs that has 4 dates on it.. the date pick icon is now pushed below the edit box

here's a sample;

the fields listed here are 11 checkboxes, would love to display 3 or 4 accross, but it appears the code does nothing..
loadjs.ready("load", function() {

// Startup script
// Write your table-specific startup script here

$("label.ew-label").attr("class","col col-form-label ew-label");
$(".ew-add-div").attr("class","ew-add-div row");
$(".ew-add-div").attr("style","width: 700px;max-width: 100%"); /*700 is the width of the form container*/
$("div[id^='r_'].form-group").attr("class","form-group col-12");
$("div[id^='r_'] > div").attr("class","col");
$("input[id^='x_']").attr("style","width:100%");

$("#r_chk_adjust_belts").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_refridgerant_charge").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_heat_exchangers").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_change_filters").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_lube_motor_bearings").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_cooling_controls").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_coil_conditions").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_lube_fan_bearings").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_electrical").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_heating_controls").attr("class","form-group col-sm-4"); /* a third */
$("#r_chk_safeties").attr("class","form-group col-sm-4"); /* a third */
...

[oscarnortiz]

sticcini, I'm sorry, but I just realize that the code just apply for an "add" page with text fields only.
I will improve the code to apply to all cases soon.