Office.js dialog API and multiple displays with high DPI

Question

I noticed a problematic behavior of the Office.js dialogAPI.

Indeed, I use two monitors one being an high DPI (3840*2160) with 250% zoom. The second one is 1920*1080 (zoom 100%).

If Office is set in monitor 1 and if I open the dialogAPI (let us say with 80% default values), then the size of the dialog is computed using the extension of the two monitors. Therefore, the dialog windows becomes gigantic, span the two displays and cannot be used without resizing.

Answer 1

Thank you Benoit. Yes this is an issue we are aware of and are currently following up.

Answer 2

Could you try using the Dialog helper in OfficeHelpers.js. It's included in v0.5.0 located here (https://unpkg.com/@microsoft/office-js-helpers@0.5.0/dist/office.helpers.js).

The dialog helper allows specifying width and height in pixels as opposed to percentages and we internally calculate the percentage and make the DialogAPI call.

At the moment, it should detect the available space and should create your dialog with the size that you specify. That said, the Dialog takes the size of the window where it was spawned. Hence if you had two monitors one 4k and one being 1280x720 and you spawed a 1920x1080 dialog, it would look massive and wouldn't shrink to fit. That is a limitation currently.

Let me know if you face any issues. Here's the sample code:

(function () {
    $(document).ready(function () {
        Office.initialize = function () {
            // specify the HTTPS url and width and height in pixels.
            // the fourth parameter is to switch to using Microsoft Teams Dialog.

            var dialog = new OfficeHelpers.Dialog('<dialog url>', 1024, 768);
            dialog.result.then(function (value) {
                console.log(value);
            }).catch(function (error) {
                OfficeHelpers.Utilities.log(error);
            });            
        }
    });
})();

// Some where in the Dialog
OfficeHelpers.Dialog.close({
    a: 1,
    alpha: 2,
    'meao': 'cat',
    b: {
        a: 1,
        alpha: 2,
        'meao': 'cat',
    }
});