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.
Hi Denis,
Thanks for your quick response. But we don't want to refresh page just to achieve the responsive design and it doesn't give flexible user experience :)
Setting the width and height in percentages makes the igDialog responsive design compatible. Can you please assist on how to do that using igDialog properties?
I am attaching sample responsive design page where igDialog stays as it is.
Please let me know if you need more details.
Thanks,
Manjunath M
Thank you for contacting Infragistics Developer Support!
If you set the dialog width in percentage the dialog converts it in pixels against the current window width. When you resize your browser the width is not being recalculated, however if you refresh the page the size will be the same as the defined percentage.
If you have any additional questions please let me know.