hi,i have installed the new SR 13.2.2157when trying to open the dialog from iframe in order to view external pages, like in your sample in
http://www.igniteui.com/dialog-window/loading-external-page
i get an error. If i replace the iframe with a div it all works fine. here is my code :
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <!--<link href="../css/normalize.min.css" rel="stylesheet" />--> <link href="../css/JQueryUI/cupertino/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" /></head><body> <!--<div id="dlg"></div>--> <iframe id="dlg" src="http://es.infragistics.com" frameborder="0"></iframe> <script src="../Scripts/lib/jquery-2.0.3.min.js"></script> <script src="../Scripts/lib/jquery-ui-1.10.4.custom.min.js"></script> <script src="../Scripts/lib/modernizr-2.7.1.min.js"></script> <script src="../Scripts/lib/IG/infragistics.loader.js"></script> <script> $.ig.loader({ scriptPath: '../Scripts/lib/IG/', cssPath: '../css/IG/', resources: 'igDialog', theme: "" });
$.ig.loader(function () { $("#dlg").igDialog({ height: 200, width: 400, headerText: "http://es.infragistics.com", showMinimizeButton: true, showMaximizeButton: true, showPinButton: true }); }); </script></body></html>
i get an error from chrome dev tools :
when i use version 13.2.2055 - it all works fineThanks in advance
Hello amos_silberman ,
Thank you for posting in our forum.
I’ve tested and confirmed that this is a newly introduced issue. I’ve logged it as a development issue with number : 168186.
I’ve opened a private case for you with number : CAS-133885-P6G0L2 so that you may track the development issue’s progress.
I’ll update you with any new information after the review via the case.
You can view the status of the development issue connected to that case by selecting the "Development Issues" tab when viewing this case on the web site.
Please let me know if you need more information.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://es.infragistics.com/support
Thank you for the quick response.
Hello amos,
I’ve received a response from our development team.
It seems that with the current implementation of the control the iframe element should not be the element which the igDialog is instantiated on, rather it should be wrapped with a div and the dialog should be instantiated on the div. Otherwise dialog will use the iframe as a top level element and will try to create markup inside otherwise, which wouldn’t work.
Previously the dialog was changing the outer container (creating a wrapper) and using the target container as content which is why in previous version that code worked. The development team decided that this was error prone and in the newer versions the iframe is not getting wrapped.
In order to resolve the issue you can set the target element to be the div and inside it set the iframe.
<div id="dlg" >
<iframe src="http://es.infragistics.com" frameborder="0"></iframe>
<div>
Let me know if you have any questions or concerns.
that worked. Thanks
Do you mean the padding that gets set between the dialog’s content in which the iframe is and the outer div?
You could remove that one by adding a class of your own. For example:
<div id="dialog" style="padding:0 !important;" class="NoPadding">
<iframe src="http://es.infragistics.com" style="width:100%; height:100%;" frameborder="0"></iframe>
</div>
And remove the padding and overflow for the dialog content div:
.NoPadding
{
padding:0 !important;
overflow:hidden !important;
}
.NoPadding > div
I’ve attached an example for your reference. Let me know if you’re aiming to achieve something similar.
Hi Maya,
It does work in a way... I need to modify my layout to support all those new padding from the Div's parent element.I don't really like giving padding:0 to div elements that are created dynamically by the dialog component, and without it it doesn't look very good.
You could set the width and height of the iframe to 99% so that it can fill the available space in the div. For example:
<iframe src="http://es.infragistics.com" frameborder="0" style=" width: 99%; height:99%;"></iframe>
Would that work in your scenario?
Thanks Maya for your response.I can confirm that the error is gone. the dialog do render without error.
The problem i get now is that the iframe element inside the parent div doesnt stretch itself to fill the dialog - i need to set specific width and height to the dialog and to the iframe element.I know it can be done quite easily using javascript - but since I open the dialog using different height and width every time, it seems like extra work that should be done by the control itself.Until now all I had to set was the dialog options, and now i need to set the element style itself.
Can you confirm that this is the expected behavior from now on?Thanks