Beautify lookups (dropdowns)

Available since in April 2020.

See also:

• modify default buttons
• custom buttons for lookups

Default dropdown style

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.

Modified dropdown style

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

new AppGiniField("partner_id").dropdown().fix("pencil", "plus");

---

(1) Remove gaps and align buttons

Code

// file: hooks/TABLENAME-dv.js

// single field: beautify
new AppGiniField("partner_id").dropdown().fix();

Result

(2) Change Icons

Code

// file: hooks/TABLENAME-dv.js

// single field: beautify + change icons
new AppGiniField("partner_id").dropdown().fix("pencil", "asterisk");

Result

(3) Remove (green) variation

Code

// file: hooks/TABLENAME-dv.js

// single field, beautify + change icons + remove variation
new AppGiniField("partner_id").dropdown().fix("search", "plus", true);

Result

Glyphicons

Read more about glyphicons here.

See also