Strange behaviour when passing a content url as a parameter

[David]

Hi,

The following piece of code has some strange behaviour:

$('.fx-modal-ajax').livequery(function() {

        $(this)

            .removeClass('fx-modal-ajax')

            .click(function(e) {

                e.preventDefault();

                var modalTitle = $(this).attr('data-modal-title');

                var modalUrl = $(this).attr('data-modal-url');

                var modalWidth = $(this).attr('data-modal-width');

                $('<div></div>')

                    .kendoWindow({

                        width: modalWidth,

                        title: modalTitle,

                        content: modalUrl,

                        modal: true

                         

                    })

                    .data("kendoWindow")

                        .center()

                        .open();         

            });   

    });

 As you can see, we get the initialisation values from the dom object that is initialised as follows:

<a class="fx-modal-ajax"

  data-modal-width="750px"

  data-modal-url="'index.php?_c=productaccountrefill&_a=ajaxquickrefill"

  data-modal-title="Add credit to your account"

  href="#">Add credit</a>

This works fine, but for some reason, the height of the opened windows is always 100% of the viewport, even though the loaded content is much less in height.

When in stead of getting the url from the link data-attribute, I pass the link directly in the javascript code, we have no problem whatsoever, and the windows resizes to the actual height of the loaded content.

Any idea?

[David]

to be complete - in Safari it loads to 100% height of the viewport; in Firefox it seems to be loading at a fixed (default?) height...

[Kamen Bundev]

Hello David,

Kendo Window intentionally doesn't have height set by default. This is done to make the Window auto resizable - to resize itself when content is added to it. The strange behavior you're experiencing is due to the different behavior of iframes in the different browsers. Unfortunately this can't be fixed automagically - you will need to set height of your iframe (or the Window) in order to work around it.

Regards,
Kamen Bundev
the Telerik team

[David]

Kamen,

Forgt about the browsers - that I can understand.
What I don't understand is that when passing in the content parameter as a string, it works great, but when using a parameter it doen't.  That doesn't make sense to me.

[Kamen Bundev]

Hello David,

I don't see any difference in the way the Window initializes, whether from data attribute or from a string. My best guess is that it depends on the speed the iframe content loads. Check the jsFiddle here:


Kind regards,
Kamen Bundev
the Telerik team

[David]

Hello Kamen,

Thanks for posting the jsFiddle.
Yes, I don't see anything different there, but you're loading a page which has more than 100% height of my viewport, so it's normal that in your case it should load fine.

I'll set up another test for you as soon as I have a few minutes...

[Tyrone]

This solution is awesome... I looked everywhere for it... thanks for the great post and the JSFiddle post