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 have problem with : $dialog.igDialog('open');.
jquery.js:250 Uncaught Error: cannot call methods on igDialog prior to initialization; attempted to call method 'open'.
When I open the dialog, I lose the content