CODEWITHSUNDEEP
dojo
Andrew Axelrod
Andrew Axelrod

Reputation: 39

dijit.dialog - Dynamically Sized dijit.Dialog Not Centered

I'm having issues with correct sizing and positioning of digit.dialog.

I'm using the built in logic of dijit.dialog to determine the dialog width and positioning as it's content can be any size. In addition, the dialog content needs to be set via the href tag. If I start the browser window at 300px width, the right side of the dialog is all the way to the right. As soon as I manually resize the browser to the full width, and then shrink it, it adjusts the position. Sometimes it gets it correctly, but it's not consistent.

How do you get digit.dialog correctly so it displays it's content correctly for the first load time?

Please look at plunkr: http://plnkr.co/edit/FLO1VFWX2LbZeZAZuhYm?p=preview

new dijit.Dialog({ 
     id: "modal",
     href: "modal.html 
});

Upvotes: 1

Views: 1143

Answers (1)

ben
ben

Reputation: 3568

Your content needs to have a fixed size. Otherwise The position is calculated with an inner size which is not relevant anymore after the sizing. Basically, when re-sizing, the position is calculated using the previous width.

By calling multiple times the resize method, the dialog will adjust its position (a sort of binary search of the best position/size)

dialog.show().then(function() {
    dialog.resize();
    dialog.resize();
    dialog.resize();
    dialog.resize();
    dialog.resize();                             
});

http://plnkr.co/edit/bhhAZlYOE6kIduxOX8cn?p=preview

But this is extremely ugly. You should consider giving a width of the content

Upvotes: 1

Related Questions