Resizing the Dialog - Mobile Support

4 posts, 0 answers
  1. Barry P
    Barry P avatar
    20 posts
    Member since:
    Aug 2006

    Posted 17 Feb 2019 Link to this post

    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';
                        height: newSize



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

  2. Barry P
    Barry P avatar
    20 posts
    Member since:
    Aug 2006

    Posted 17 Feb 2019 in reply to Barry P Link to this post

    FYI, I do the open() and the end to recenter the dialog.
  3. Barry P
    Barry P avatar
    20 posts
    Member since:
    Aug 2006

    Posted 17 Feb 2019 Link to this post

    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.
    07.var contentArea = $("[data-id='RegistrationWindow']").parent().children()[1];
    09.for (var i = 0; i < $(contentArea).children().length; i++) {
    10.    maxHeight += $(contentArea).children()[i].clientHeight;
    13.var newSize = Math.min(window.innerHeight - 25, maxHeight) + 'px';
    15.    height: newSize

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

  4. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1176 posts

    Posted 19 Feb 2019 Link to this post

    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.

    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.
Back to Top