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).

inline-layout vs. default layout

default
inline

Please note that the original labels have become placeholders automatically.

Both look nice. Sometimes it just makes sense to apply inline-layout. With one line of code, you can move fields into a single line:

// inline fields
new AppGiniFields(["last_name", "first_name"]).inline("Name");

Code

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

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

// 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.

Social media & sharing icons powered by UltimatelySocial