CODEWITHSUNDEEP
office-js
ZJL
ZJL

Reputation: 35

Set constant size of dialog box using Dialog API for Office Online

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.

Upvotes: 2

Views: 1260

Answers (3)

Gullbyrd
Gullbyrd

Reputation: 1571

Building on Alaa's answer, this worked better for me (inside the pixelToPercentage function) to support both web and desktop:

var cheight = window.height? window.height : screen.height;
var cwidth = window.height? window.width : screen.width;
if (heightInPixel > cheight) heightInPixel = cheight;
if (widthInPixel > cwidth) widthInPixel = cwidth;
var height = Math.floor(100 * heightInPixel / cheight);
var width = Math.floor(100 * widthInPixel / cwidth);

Upvotes: 0

Alaa Abuiteiwi
Alaa Abuiteiwi

Reputation: 101

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.

Upvotes: 3

Rick Kirkham
Rick Kirkham

Reputation: 9674

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.

Upvotes: 0

Related Questions