SharePoint allows you to edit list items either in a dialog box or in a dedicated window. Each has its benefits, but if you choose the dialog option with certain content, you may be irked by the default, narrow, size. What follows are couple of tricks that I’ve found to mitigate the issue. For more information on loading and using custom scripts see my article, “SharePoint Scripting Basics: Master Pages, Caching and Loading Scripts“.
Maximizing Dialogs
SharePoint dialogs feature a Maximize button that will will stretch the dialog to the full width of the browser. The below script, when run on the page, will do this automatically whenever the dialog is opened.
// Maximize the window
function CustomValidation_maximizeWindow() {
var currentDialog = SP.UI.ModalDialog.get_childDialog();
if (currentDialog != null) {
if (!currentDialog.$S_0) { currentDialog.$z(); }
};
};
ExecuteOrDelayUntilScriptLoaded(CustomValidation_maximizeWindow, 'sp.ui.dialog.js');
Most of the functions and methods here are provided by directly by SharePoint. Once you retrieve the dialog via SP.UI.ModalDialog.get_childDialog() you can interrogate the $S_0 property (a boolean indicating the maximize toggle state) and use the $z() method to change it. Finally the ExecuteOrDelayUntilScriptLoaded() method ensures that the script isn’t run until after the dialog script is loaded.
Maximizing Select Fields with DP_SharePoint
After maximizing the dialog, you may be annoyed to see that multi-select fields refuse to take advantage of the newly available space. They will stay stubbornly narrow and implement annoying horizontal scroll bars if the content doesn’t fit.
The easiest way to correct this is to modify the style of the elements and eliminate the hardcoded width. The easiest way to do that is to grab a reference to the field using DP_SharePoint. I prefer to place all custom validation into a single function, CustomValidation(), and then use the _spBodyOnLoadFunctionNames.push() function to load it appropriately.
<script type="text/javascript" src="/Teams/usbpmim/Style Library/Scripts/DP_SharePoint.js">
</script>
// Manage all custom validation
function CustomValidation() {
// Get Field References
var SelectField = DP_SharePoint.getFieldRef("My Select Field");
// Set Multi-select widths
SelectField.Candidates.style.width = null;
SelectField.Selected.style.width = null;
};
// Add the CustomValidation to the call stack
_spBodyOnLoadFunctionNames.push("CustomValidation");
In this example the displayed field name of the multi-select is “My Select Field” (line six), change this or clone it as appropriate for your field(s). Note that multi-selects feature two fields, a “Candidates” field on the left containing all the options and a “Selected” field on the right containing the selected options. As in the script (lines eight and nine), both of these should be modified.
In Conclusion
These snippets tame two of my biggest peeves with SharePoint dialogs. They’re easy to implement and give more complex dialogs the breathing room they need.
