Set constant size of dialog box using Dialog API f

Question

Is there a way to set a constant size for the dialog box that is opened using the Dialog API, by using the min-width/max-width CSS properties or otherwise? The API only allows setting the width and height percentage, which makes the box look inconsistent when resizing or using different resolutions (30% of 1024px is a skinny window, but looks fine for 1920 for example).

I noticed that the "Office Add-ins" store pop up seems to have a min-width/max-width, so that when resizing it maintains a consistent look, and I'm hoping that I can leverage what it does as well.

Answer 1

The office-js-helpers library has a wrapper for the Dialog API that let's you set dimensions in pixels. Might be worth trying it.

EDIT: If the helpers don't help, I recommend that you go to Office Developer Voice and vote up this suggestion:Improve Custom Dialog

Or create your own.

Answer 2

Here you go:

var dim = pixelToPercentage(700, 350);
Office.context.ui.displayDialogAsync(window.location.origin + "/pop-ups/create_export_link.html",
                { height: dim.height, width: dim.width },
                createExportLinkCallback);

and the supporting function is:

function pixelToPercentage(heightInPixel, widthInPixel) {
    var height = Math.floor(100 * heightInPixel / screen.height);
    var width = Math.floor(100 * widthInPixel / screen.width);
    return { height: height, width: width };
}

this way you calculate the dimensions in the percentage format dynamically.