Когда мы меняем размер окна браузера, размеры ленты и рабочей области на сайте SharePoint пересчитываются заново и устанавливаются с помощью скриптов. Корректировка размеров ленты и рабочей области происходит в глобальной функции FixRibbonAndWorkspaceDimensions, которая определена в файле init.js.
Существует возможность добавить свои обработчики изменения размеров окна. Для этого достаточно добавить функцию-обработчик в глобальный массив g_workspaceResizedHandlers.
Существует возможность добавить свои обработчики изменения размеров окна. Для этого достаточно добавить функцию-обработчик в глобальный массив g_workspaceResizedHandlers.
Например, выполнив в консоли браузера такой код (опустив лишние проверки), вы сможете видеть ширину и высоту рабочей области после изменения размеров окна:
function logWorkspaceSize() { var ws = document.getElementById('s4-workspace'); console.log(ws.style.width + ' x ' + ws.style.height); }; g_workspaceResizedHandlers.push(logWorkspaceSize);
Можно добавлять обработчик не напрямую, а через клиентскую модель:
SP.UI.Workspace.add_resized(logWorkspaceSize);
Есть в SharePoint один неприятный момент, связанный с изменением размеров элементов страницы: на странице со списком, если в представлении много колонок и они не убираются на экран, появляется прокрутка, при этом вкладка ленты "Обзор" и уведомления (которые SP.UI.Status) подгоняются под размер окна, а не представления.
Используя свой обработчик, можно это исправить:
Функция FixRibbonAndWorkspaceDimensions не вызывается, если страница открыта в модальном окне, т.е. если в строке запроса присутствует параметр IsDlg=1. В этом случае надо самому устанавливать обработчик на изменение размеров окна.ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(function () { var title = document.getElementById('s4-titlerow'), status = document.getElementById('s4-statusbarcontainer'), contentDivTable = document .getElementById('ctl00_MSO_ContentDiv') .getElementsByTagName('table')[0], contentTable = document.getElementById('MSO_ContentTable'), delta = contentDivTable.offsetWidth - contentTable.offsetWidth, newWidth = 0; if (delta > 0) { newWidth = title.offsetWidth + delta + 'px'; title.style.width = newWidth; status.style.width = newWidth; } }); }, 'init.js');