Skip to content

Beautify lookups (dropdowns)

This is how dropdowns/lookups look by default. As you can see there is a gap between the buttons and the style of the dropdown (having a gradient background) looks differently in comparison to other controls.

With a single line of code you will be able to align the buttons, adjust the look, remove the gaps and even change icons. 

1
2
var dv = AppGiniHelper.dv;
var field = dv.getField("partner_id").dropdown().fix("pencil", "plus");

(1) Remove gaps and align buttons

Code

1
2
3
4
5
// file: hooks/TABLENAME-dv.js

// single field: beautify
var dv = AppGiniHelper.dv;
var field = dv.getField("partner_id").dropdown().fix();

Result

(2) Change Icons

Code

1
2
3
4
5
// file: hooks/TABLENAME-dv.js

// single field: beautify + change icons
var dv = AppGiniHelper.dv;
dv.getField("partner_id").dropdown().fix("pencil", "asterisk");

Result

(3) Remove (green) variation

Code

1
2
3
4
5
// file: hooks/TABLENAME-dv.js

// single field, beautify + change icons + remove variation
var dv = AppGiniHelper.dv;
dv.getField("partner_id").dropdown().fix("search", "plus", true);

Result

See also: