Wednesday, September 21, 2016

Widening the Multiple Selection Box on a List Form

The Problem

The OOTB list form has a multiple selection box; many entries there are too wide to fit in the list box.

The Solution

SharePoint Designer 2013 and jQuery come to the rescue.

1) Open the site in SharePoint Designer.
2) Edit EditForm.aspx. Note that some lines will be highlighted in yellow - this means you should NOT edit them.
3) You will find the <WebPartPages:WebPartZone> tag followed by <ZoneTemplate> tag. Put your cursor there and then go to the Insert button on the ribbon. There, choose Web Part and find Content Editor.
4) A Content Editor web part is now on your form page. Now, you want to add a jQuery script there. After the </ID> closing tag, add this:

<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor"><![CDATA[<script type="text/javascript">

$(document).ready(function(){

$('select[multiple=multiple]').width(300);
});
</script>
]]></Content>

(nota bene - on the line where you set the width, you can adjust the width the way you want or pick a specific multiple selection box; in my example, you pick all of them.

5) Rinse and repeat for NewForm.aspx.

No comments:

Post a Comment