It is recommended to provide a view for the available merge fields in the MAILINGS ribbon tab which is essentially the most important tab when it comes to the creation of mail merge templates.

But sometimes, a table has simply a lot of fields and the available height for the merge field list is limited. This sample shows how easy it is to customize the ribbon bar and the basic HTML elements such as an unordered list.

The following Javascript / jQuery is all you need to make the last level of the dropdown menu scrollable:

var interval;

// after the complete ribbon is loaded, "listen" to the
// "Insert Merge Field" drop-down to see whether the
// database is loaded completely
TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
    interval = setInterval(SetScrollbars, 500);
});

// if button doesn't have the "disabled" class anymore
function SetScrollbars() {
    if (!$("#drpDnBtnInsertMergeField").hasClass("ui-state-disabled")) {

        clearInterval(interval);

        // find the last "ul" element and set the height and
        // overflow properties
        $("#insertMergeFieldDropDown").find("li").each(function () {
            $(this).find("ul").last().css({
                "max-height": "150px",
                "overflow-y": "scroll",
                "width": $(this).width() + 50
            });
        });
    }
};

After the complete ribbon structure is loaded, the dropdown button Insert Merge Field is monitored until it is enabled. This implies that the database is loaded completely.

When loaded, all li elements of the dropdown button element are iterated. For each list element, the last ordered list element (<ul></ul>) is used to make CSS changes. This element is the list where all available merge fields are listed.

The maximum height and the overflow behavior is adjusted to enable the scrollbars when required. Additionally, the width is increased to make some more space for the additional scrollbar.

Download the sample from GitHub and test it on your own.