In our application we have implemented responsive design using bootstrap css. I am trying to use igDialog to open a new page inside it.
Now the problem is that when I reduce the size of the browser, igDialog doesn't adjust to fit inside the browser. While initializing the igDialog I am setting width in terms of percentages. After looking into igDialog html, I see that few DIV tags have width in terms of pixels(based on initial browser size).
Is there any option for igDialog to set all it's content width and height in terms of percentages?
======================
//"dialog" is the initial DIV defined to initialize igDialog with width in percentage but it got overridden.
<div id="dialog" style="width: 1456px; height: auto; z-index: 1052; outline: 0px; position: absolute; display: block; top: 0px; left: 63.5px;" tabindex="0" class="ui-igdialog ui-dialog ui-widget ui-widget-content ui-corner-all"> <div class="ui-igdialog-header ui-dialog-titlebar ui-widget-header ui-corner-top ui-helper-clearfix" zindex="-1" unselectable="on" style="display: block; outline: 0px;"> <span class="ui-igdialog-headertext ui-dialog-title" style="width: auto;"> </span> <a class="ui-igdialog-headerbutton ui-corner-all ui-state-default ui-igdialog-buttonclose" data-id="close" href="#" role="button" title="Close" longdesc="Close"> <span class="ui-igdialog-close-icon ui-icon ui-icon-close"></span> </a> </div> <div class="ui-igdialog-content ui-widget-content ui-dialog-content" style="display: block; width: auto; height: 675.39999961853px; min-height: 0px;"> <iframe id="dialogFrame" style="margin:-15px" src="http://testurl" frameborder="0" width="102%" height="103%"></iframe> </div></div>
==================================
Hello Manjunath,
Thank you for the provided sample!
In case of "%" for height or width, the size of browser window is used and it has effect only on open action. (https://www.igniteui.com/help/api/2014.1/ui.igDialog#options:height, https://www.igniteui.com/help/api/2014.1/ui.igDialog#options:width)
To workaround this you can open the dialog on event window's rezise.
1 2 3 4 5 6 7 8 9 10 11 12
$(document).ready(function() { $(window).on('resize', function() { var $dialog = $('#dialog'); if (!$dialog.hasClass('ui-igdialog')) { return; } $dialog.igDialog('close'); $dialog.igDialog('open'); }); });
Please let me know if the following works for you and if you need further assistance with that.
I'm just following up to see if you need any further assistance with this issue. If so please let me know.
Hi Denis,
I tested with your sample, still I don't see responsive igDialog i.e. igDialog size is not resized when I resize the browser(Both IE and Chrome)
Thanks,
Manjunath M
Thank you for notifying me for non-working sample!
I have updated previous reply, and it should be working now.In order to work the dialog should be closed so it can be opened.If you have any additional questions please let me know.
Thanks Denis, it is working now.
I will let you know in case if I face any other issues with it.