How can I move the form buttons below the form

Question

I would like to move the buttons below the form to make it cleaner for my users.

Answer 1

On older versions of dbFront (before 1.4.0), you can use CSS to move and style the buttons.

These are the steps to add the CSS:

1. Open the Table Properties to the Layout Tab and add the class name "buttonsBelowForm" in the field [Css Class]
2. Add the following CSS needs to be added to your Custom CSS file.

One the form reloads then you will see the buttons below the form. You can tweak the CSS to adjust the button size and spacing.

/* 
Move the Buttons below any Form that has the CSS class "buttonsBelowForm"
*/
.buttonsBelowForm .responsiveForm {
	flex-direction:column;
}
.buttonsBelowForm .buttonStrip {
	columns: 130px;
	page-break-inside: avoid;
	break-inside: avoid-column;
}
.buttonsBelowForm div.buttonStrip fieldset:first-child {
	margin-top:0 !important;
}

Answer 2

As of dbFront 1.4.0.0517 you can configure dbFront directly to position the buttons below the form.

This setting is available on the Layout tab in the table properties.