Resizing the Dialog - Mobile Support

[Barry P]

I've noticed that the dialog control is very good at handling changes to the width of the browser window.  No matter how I resize my browser, the width is no wider than the window, and never exceeds the width I specified in the configuration.

Unfortunately, it doesn't seem to really care about the height of the browser window.  If I specify a height that's taller than the browser window, or resize the browser to be shorter than the dialog, the dialog extends past the bottom of the browser window and you are unable to see all of the dialog or access the buttons.

I wish it handled the height as well as the width.  Any chance that can be implemented?

I was able to accomplish this with the code below.  In Firefox, I tend to lose the padding below a tabstrip control, but otherwise, it's been ok, though I think you guys could do a better job that I've managed to implement.  I also don't want to have to support the code.  :)

                var maxHeight = 1;
                for (var i = 0; i < $("[data-id='ForgotWindow']").parent().children().length; i++) {
                    maxHeight += $("[data-id='ForgotWindow']").parent().children()[i].scrollHeight
                }

                var newSize = Math.min(window.innerHeight - 25, maxHeight) + 'px';
                _forgotDialog.setOptions({
                    height: newSize
                });

            _forgotDialog.open();

 

FYI, I create the dialog with a DIV that has the attribute data-id="ForgotWindow", and I've set it to the variable _forgotDialog.

[Barry P]

FYI, I do the open() and the end to recenter the dialog.

[Barry P]

I've been working on this a bit, and I thought I would post my updated code.  Before, I was using the scroll height of the content area, but that wasn't a good choice.  It was close, but it introduced anomalies, and quite frankly, it as a little lazy.  I now do a better job of calculating the height of the content area.  (The code here is for a different dialog, so the names are different, but the concept is the same.)

01.var maxHeight = 0;
02.maxHeight += $("[data-id='RegistrationWindow']").parent().children()[0].clientHeight; // This is the title bar.
03.maxHeight += $("[data-id='RegistrationWindow']").parent().children()[2].clientHeight; // This is the button bar.
04.maxHeight += parseInt($($("[data-id='RegistrationWindow']").parent().children()[1]).css('padding-top')); // This is the top-padding of the content area.
05.maxHeight += parseInt($($("[data-id='RegistrationWindow']").parent().children()[1]).css('padding-bottom')); // This is the bottom-padding of the content area.
06.
07.var contentArea = $("[data-id='RegistrationWindow']").parent().children()[1];
08.
09.for (var i = 0; i < $(contentArea).children().length; i++) {
10.    maxHeight += $(contentArea).children()[i].clientHeight;
11.}
12.
13.var newSize = Math.min(window.innerHeight - 25, maxHeight) + 'px';
14._registrationWindow.setOptions({
15.    height: newSize
16.});
17.
18._registrationWindow.open();

I have to run this when I first open the dialog (in case it's too big for the window), after I do anything that can potentially change what's in the content area, and when the browser is resized.

Still, I'd prefer not to have to do all of this. :)

[Veselin Tsvetanov]

Hi Barry,

Thank you for your suggestion and for your input on the discussed case. Based on that I have created the following Feedback item on your behalf. This way other members of the community will be able to review and discuss the suggested. I would also suggest you to cast your vote for the proposed feature.

Regards,
Veselin Tsvetanov
Progress Telerik