Inline labels

[kanklovitch]

Hi Guys
I mostly just use AppGini and Jan's plugins "out of the box" so I am not very good at customization. My issue is I would like to put my labels just to the left of both fields when I inline them. I have read through the threads and I couldn't figure out how to do it.

Ken

[pfrumkin]

Hi Ken

Perhaps check https://appgini.bizzworxx.de/products/j ... mn-layout/.

~Paul

[kanklovitch]

Thanks for the link Sir
For some reason I couldn't find that information, I will check it out.

Ken

[kanklovitch]

Hi Guys
I still haven't been able to figure this out. I want to put 2 or 3 fields in the same line with the labels for each field next to the field. So far I can only put the labels at the start of each line.

Ken

[lramirez]

Hello
There are many options here that you may find useful...

https://www.appgini.de/docs/Javascript- ... start.html

enjoy

[jsetzer]

I want to put 2 or 3 fields in the same line with the labels for each field next to the field. So far I can only put the labels at the start of each line.

That's right, the .inline("...") function moves multiple fields' controls into one form-group-line which has one label.

Code: Select all

    LABEL: [CTRL1] [CTRL2] [CTRL3]

Example

Code: Select all

// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.dv;
dv.getFields(["name", "type_id", "position"]).inline("Name, Typ, Position", [6,4,2]);

chrome_HXjpASE58U.png (3.98 KiB) Viewed 715 times

Gonna post another option in a minute.

[jsetzer]

I want to put 2 or 3 fields in the same line with the labels for each field next to the field.

As mentioned above, perhaps multi-column-rows are an option for you:

Code: Select all

// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.dv;
dv.createLayout([6, 4, 2])
    .add(1, ["name"])
    .add(2, ["type_id"])
    .add(3, ["position"]);

chrome_CG0JZATsku.png (3.96 KiB) Viewed 715 times

Due to limited page-width this may break, depending on available space.

[jsetzer]

I want to put 2 or 3 fields in the same line with the labels for each field next to the field.

Perhaps wrapping the labels may help on the width-problem, if any:

Code: Select all

var dv = AppGiniHelper.dv;
dv.createLayout([6, 4, 2])
    .add(1, ["name"])
    .add(2, ["type_id"])
    .add(3, ["position"]);
    
dv.getFields(["name", "type_id", "position"]).wrap();

Last line places the labels above the controls.

chrome_l895ujtWHq.png (3.88 KiB) Viewed 714 times

---


Small drawback
Please note: When adding lookup-/dropdown-controls to layouts and then wrapping labels, depending on your version of AppGini and AppGini Helper Javascript Library, there may be a small gap (left-padding) left of the dropdown control, due to AppGini's quite new "flex" display of dropdowns.

This is what you may see in your environment:

chrome_mMc08KE9lp.png (2.02 KiB) Viewed 714 times

I have already fixed this in next version of AppGini Helper Javascript Library. For now, you can fix this by yourself using the following javascript code*:

Code: Select all

dv.getField("type_id").getRightContainer().removeClass("col-sm-12");

* replace field name "type_id" by your field name.