Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
285
Responsive design for igDialog
posted

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;">&nbsp;</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>

==================================