Hi,
I would like to ask for an issue where igDialog size does not update when its content changes. I have a really big div inside a dialog and I want to scroll through that. However, igDialog automatically set size to the div size, so it flow all over my screen. I already set the dialog css to overflow: auto and set its size but this did not work for me. Please let me know if there is any setting that helps. Thanks in advance.
Hello tangailam,
I have tested this with setting a larger div during igDialog initialization. It correctly renders with scrollbars when required. What is more, I have also added a toggleClass, in order to change the div size and color on btn click. Using both approaches, I was unable to reproduce the auto resizing. I am attaching the sample for reference. Please let me know if you are using such approach. If not or you still experience the issue, could you please modify it in order to reproduce the described behavior? Also please notice this sample uses the latest available IgniteUI version - 14.2.20142.2140 .
I am looking forward feedback from you!
Hi Ivaylo,
Thank you for your response. Your sample was very clear and easy to understand.
My approach is a little more complicated than that, but this is how it is working. I use MVC helper to create a dialog within my page. Once I click a button, the page will connect to database to get content (which is a list of images) then show the dialog. I need the dialog to have its fixed size and its content will be scrollable through each and every item. And that's when I see the issue. Dialog height automatically gets its content's height and flows all over.
This is my dialog div and its MVC helper:
<div id="my-dialog"></div> @(Html.Infragistics() .Dialog() .ContentID("my-dialog") .Modal(true) .Width("100%") .Resizable(false) .OpenAnimation("fade") .CloseAnimation("fade") .State(DialogState.Closed) .Render())
This is my js script once dialog content was retrieved and ready to be shown:
$("#my-dialog").igDialog({ width: 300, height: 250 });$("#my-dialog").igDialog("open");
After this, the dialog was shown, its width is 300, but its height is the content height (about 19000+ px).
I hope this helps you have a better view of the situation.
I understand you are using a different approach. I have tried to replicate it modifying the sample attachment with no success. What I have done is to increase the div size and add an image in it. The dialog renders according to the specified dimensions.
Please notice, in case of "%" is used to set the initial width of a dialog, the size of browser window is used and it has effect only on open action. http://help.infragistics.com/jQuery/2014.2/ui.igDialog#options:width
Also notice when using $("#my-dialog").igDialog({ width: 300, height: 250 }); you are actually Initializing a new instance of the Dialog widget in the same “my-dialog” container. In order to modify the existing instance, it is preferred to set the dimensions using the options like:$("#my-dialog").igDialog("option", "width", 300);$("#my-dialog").igDialog("option", "height", 250);http://help.infragistics.com/jQuery/2014.1/ui.igdialog#options:width
What is more, is it possible to modify the attached sample, in order to better illustrate your approach. What is most important is how you set the widths and heights. For example when you using px, %, when there are no such specified ...etc. Debugging this issue could really ease the investigation.
Thank you Ivaylo. After trying to create a sample, I have found that the issue does not come from igDialog but something from my css settings. Thank you again.