Inline Fields

It has been requested many times: inline fields. Sometimes it makes sense to move related fields into a single line, for example for name-fields (like fist-name + last-name) or for address-fields (like postal code + city).

Please note that the original labels have become placeholders automatically.

Syntax

// syntax:
// new AppGiniFields( fieldname[] ).inline( label, width[] );

Examples

Example 1:
Automatic sizing of column widths

// simple example
// automatic sizing
new AppGiniFields(["last_name", "first_name"]).inline("Name");

Example 2:
Defining column widths explicitly

// example with explicit sizing
new AppGiniFields(["last_name", "first_name"]).inline("Name", [6, 6]);

Variant with better readability for beginners

// long example
var fieldnames = ["last_name", "first_name"];
var widths = [6, 6];
var label = "Name";
new AppGiniFields(fieldnames).inline(label, widths);

Sizing (column widths)

Automatic sizing

The inline()-function tries to calculate the width of both fields as good as possible. In this case we have two fields and both will be sized to 50%.

In the next example there are 5 fields. Because of the 12-column grid-system we cannot just calculate the width as 5 / 12. So the algorithm decides for different sizes:

Custom sizes

If you wish different sizes, you can just pass an array of integers and give the widths you need. As we are using Bootstrap’s 12-column grid system, you can mix widths from 1 to 12. Let’s see some more examples:

2 fields / custom widths [8, 4] (67% / 33%)

new AppGiniFields(["last_name", "first_name"]).inline("Name", [8, 4]);

2 fields / custom width [3, 9] (25% / 75%)

new AppGiniFields(["last_name", "first_name"]).inline("Name", [3, 9]);

More fields

You can even add more fields. The new inline() function will group them together and give them a label. As mentioned before you can mix column widths from 1-12.

new AppGiniFields(["last_name", "first_name", "middle_names", "last_name_at_birth", "last_name_previous"]).inline("Name", [12, 6, 6, 12, 12]);

Attention
The number of fields has to be the same as the number of widths. Watch the console output for warnings.