Nintex Forms – Resizing the Choice List Multiple Selections control

In Nintex Forms, when you add a Choice control, it can have a number of different display formats.  The one I will focus on today is the List (multiple selections) format.  This is a great way to display a bunch of data, but at this stage (12th May 2015), the control shows your 4 items from your list.  If you want to see the others, you need to scroll down.  This is regardless of whether you resize the control at design time.

To show you an example, I added a Choice control to a dummy form, add 20 items into it and looked at the preview.  This is what it looks like:

To get the control to display all 20 items, resize the control.  This is really more so that when you build out the rest of your form, you can cater for the size of this control.

Then, open the settings for the choice control and expand the Formatting section.  We need to give the control a css class name.  You can name it anything you want.  I’ve named it “ListMultiSelect”. Quite ingenious isn’t it?

The reason we are doing this, is because we will be adding some JavaScript/jQuery to find this control and set the “size” attribute.  The default value is set to 4.  We will change that to 20.

Firstly, a little note about the JavaScript below.  The css class lets us find the parent control. Inside that is the html “select” control, which is the real object we need.

Here is the JavaScript:

NWF$(document).ready(function()
{
  var objSelect = NWF$(‘.ListMultiSelect’);
  objSelect.find(‘select’).attr(‘size’, ’20’);
});

Not really rocket science, but I thought it would help out some of the users out there.

You need to take the above JavaScript and copy it.  Then in your Nintex Form, go to Form Settings (on the ribbon) and expand the Custom JavaScript section:

When you preview this form, you’ll now see that all 20 items are showing.

I hope this helps some of you who are using the Choice control in this manner.

If you have any questions, please post them as comments at the bottom of this post.