KLST Responsive Web Design

Responsive UI

Resize SharePoint Dialog Boxes dynamically based on screen width/height

KLST has completed many successful Windows 10 apps including our very own Windows app  Annotate101, helping organizations realize the full potential of Windows 10 app development model. Find below a recent case study where KLST was engaged to build a Windows 10 app (we have changed the name and industry of the client case study to protect its privacy)

If you are using SharePoint 2013 Dialog boxes on a responsive website then ensure that you include the following JQuery code snippet to ensure that Dialog box width and height automatically adjusts as per device screen width and height.

var dialogOptions = {
url: newDialog.WebUrl + ‘/MyDialog/ThisIsADialogBox.aspx’,
title: ‘Dialog Box Resizing Sample’,
allowMaximize: false,
showClose: true,
height: 520,
};
SP.UI.ModalDialog.showModalDialog(dialogOptions);

Once the Dialog box is loaded then you invoke a function similar to one below (from the page contained in the dialog):
function resizeDialogWorkspace() {
//Check the Windows height and if smaller than dialog then set the height of dialog less than window height
if (window.innerHeight < $(‘#s4-workspace’).height()) {
$(‘#s4-workspace’).height(window.innerHeight – 6);
}
}