This is a migrated thread and some comments may be shown as answers.

Resizing the Dialog - Mobile Support

3 Answers 58 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Barry P
Top achievements
Rank 1
Barry P asked on 17 Feb 2019, 11:17 PM

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.

3 Answers, 1 is accepted

Sort by
0
Barry P
Top achievements
Rank 1
answered on 17 Feb 2019, 11:24 PM
FYI, I do the open() and the end to recenter the dialog.
0
Barry P
Top achievements
Rank 1
answered on 18 Feb 2019, 01:37 AM

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. :)


0
Veselin Tsvetanov
Telerik team
answered on 19 Feb 2019, 11:22 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Dialog
Asked by
Barry P
Top achievements
Rank 1
Answers by
Barry P
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or