scrolling locked until I resize dialog

[Marcel Heitlager]

I use the popup dialog to display some ajax data.  Sometimes it overflows the page.  The vertical scrollbar displays, but when I move it the text won't scroll.  It only scrolls after I grab the dialog resize handle.  Any reason why this happens?

Thanks,

Marcel

The markup is as follows:

    

<ej:Dialog ID="questionPopup" EnableResize="true" ClientIDMode="Static" runat="server" MaxHeight="1024px" MinHeight="500px" MinWidth="800px"

        ShowOnInit="false" ShowFooter="true" FooterTemplateId="questionPopupFooter" ActionButtons="close,maximize" ShowHeader="true" Title="<span style='font-size:larger; font-weight:bold'>Questions</span>">

        <DialogContent>

            <div style="text-align: left">

                <ej:WaitingPopup ID="questionSpinner" runat="server" ClientIDMode="Static" ViewStateMode="Disabled"></ej:WaitingPopup>

                <div id="questionAnswer">

            </div>

        </DialogContent>

    </ej:Dialog>

    <script id="questionPopupFooter" type="text/x-jsrender">

        <div class="footerspan" style="float: right; margin-right: 30px; margin-top: 5px">

            <ej:Button ID="btnQuestionPopupClose" Width="70px" Height="30px" runat="server" Text="Close" ClientSideOnClick="btnQuestionPopupClose_onclick"></ej:Button>

        </div>

    </script>

The javascript code that calls the dialog is as follows:

        function ShowQuestionsWindow(key) {

             $("#questionPopup").ejDialog("open");

 

            var spinnerObj

            $(function () {

                $("#questionSpinner").ejWaitingPopup();

                spinnerObj = $("#questionSpinner").data("ejWaitingPopup");

                spinnerObj.show();

            });

            var result = "";

            $.getJSON($("#hdnPopupPath").val() + "GetQuestion/" + key, {}, function (data) {

                $("#questionAnswer").empty();

                $("#questionAnswer").append(data);

                spinnerObj.hide();

            });

        }

web config:

 <add assembly="Syncfusion.EJ.Web, Version=15.2451.0.40...

  <add assembly="Syncfusion.EJ, Version=15.2451.0.40...

[Arun Palaniyandi]

Hi Marcel Heitlager,

Thanks for contacting Syncfusion Support.   

   

We have tried to replicate this issue and we can replicate. After validating, we found that this issue is because after the dynamic content is loaded as the Dialog’s content, the element is not refreshed properly and so the scrollbar doesn’t occur. Hence in order to resolve this issue we need to refresh our Dialog after the AJAX content is loaded to DialogContent using the Dialog public refresh method. Please find the below code snippet.   

   

 

 

  DialogObj = $("#questionPopup").ejDialog("instance"); // take the Dialog instance before get the getJSON function 

 

 

$.getJSON($("#hdnPopupPath").val() + "GetQuestion/" + key, {}, function (data) { 

                $("#questionAnswer").empty(); 

                $("#questionAnswer").append(data); 

                DialogObj.refresh();    // refresh the Dialog after the new data is appended 

                spinnerObj.hide(); 

            }); 

 

 

 

 

 

We have also prepared a sample below for your reference. 

http://www.syncfusion.com/downloads/support/forum/135653/ze/ASPDialog-1286012510 

 

 

API Link: 

 

https://help.syncfusion.com/api/js/ejdialog#methods:refresh 

 

 

Please check the shared sample and details and let us know if you need any further assistance.   

   

Regards,
Arun P. 

[Marcel Heitlager]

That does the trick.

Thanks!

Marcel

[Arun Palaniyandi]

Hi Marcel Heitlager, 

 

We are glad that our solution has resolved your issue. 

 

Please let us know if you have any queries in future. 

 

Regards, 

Arun P.