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.

HTML5: Make merge field lists scrollable in the ribbon

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

Loading...

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.

GitHub

Download and Fork This Sample on GitHub

We proudly host our sample code on GitHub.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)