Change default linear layout to grid layout with jQuery
Posted: Thu Jun 25, 2020 6:52 am
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");
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");