Creating form layout

To design forms in PHsPeed, the standard rules of Bootstrap will apply. Therefore we will not go into detail regarding the bootstrap grid system. If you are not familiar with bootstrap forms, we suggest that you first take a view on the Bootstrap website for the details. Generally bootstrap paint area's are divided into rows and columns. Each column can occupy max.12 units. Depending on the device that is presenting the form you can define the number of units to be used on a mobile, tablet or desktop. So if you have a row with two columns you could define each column to occupy 6 units on a desktop, but 12 units on smaller devices. That will break up the form on smaller devices causing the two columns to be presented below each other. The best way of getting the principle is creating a test application and play with the settings.

PHsPeed has a special tab regarding layouting your forms.

The grid system can be setup on two different components:

  1. Area
    • The Area component will basically generate a simple 'div' pair
  2. Panel
    • The Panel component will generate a bootstrap panel/card class, which causes a default border space around and within that panel. The panel can have a header which is a separate component that you can put on the panel.

the main difference is that Area is a html component where Panel is a bootstrap component. Therefore it is recommended to create your responsive forms based upon a Panel.

To create a responsive layout add a panel on the form (and a panel header if you need). Add rows and columns by adding components from the component bar on the form, or add in bulk by performing a right mouseclick on the panel and select 'add rows, add colums, add grid'. Then a small windows will appear to bulk add a number of rows, columns, or rows with columns.

To make use of the grid system you can define rows and within the rows columns (which can contain new rows etc.). Each row will be presented below each other. Columns willl break depending on the grid device settings.

Within the IDE you are able to move rows and columns to get another sequence. Also, if you are on a valid parent component you can add rows, columns of a full grid by a few mouseclicks.

Within a column you can put different components for showing data or doing your input. Although it is not forbidden to put components elsewhere, it is important to understand and follow the bootstrap grid design pattern as described in the bootstrap documentation. Therefore do not put components on rows, but only in columns. You can add more visual components on a single column.

Visual Component properties

There are several properties involved in regards to layout. At raw level you can use the class property. Within this property you can assign a full css to your application. Most for specialists. Another property is the style property. This will allow you to apply graphic properties in a menu-wise editor. It will generate css code for shading, borders etc. Finally there are properties that directly influence the look and feel of your application. I.e. textcolor, border, padding etc. The main thing that is important is to be consistent. In general we advise to use the properties where possible and to use the class property for the layout elements that cannot be accessed by the regular properties. If that is not sufficient, use the style property. In general, most of your wishes can be achieved by the direct properties and class property.

Device context

The device contexts describes the 'breaking' of your application if it is displayed on a regular monitor, a laptop, tablet or phone. It might have influence on spacing of objects. It is common habit to put labels of fields above the field and not before. The reason is that applications are created within the context of 'mobile first'. If you know that your application is only used on large screens, you might have different desire.

As soon as you apply a device property, the component becomes a bootstrap component and will behave the bootstrap way. That can bring supprises regarding to layout as sometimes, spacing between objects or within an object (padding and margin) are set double because the owning component (the column) also has already default margins and paddings.

In the beginning this might be a bit confusing as you have to play with the settings to get used to the bootstrap system. But if you follow the following rules then this might be a good start for you:

  • Start with a panel and set the containerclass to container-fluid_p-0; deviceclasses to 12. This will create a panel with no padding over the full available width. Set padding to p-3 to allow a basic padding to the inner bootstrap grid.
  • Add rows and columns, set the column device classes to the rules you want it to break on different divices. I.e. 3 columns on large devices, 2 on medium and 1 on small (would be represented by 4, 6 and 12). Set padding to p-3. Set gutter to no on rows.
  • Add your fields. Do not apply a device class. If it contains a value, then change it to empty.

This is a good basic approach for a simple form. If rows need to show spaces you have the option to add a topmargin. This way you can create a small space between the top of your browser and the form; or influence the space between two rows. Again, the main difference here is that topmargin reflects in a standard css way of defining layout where 'gutter' and 'p-x' are bootstrap defines.